React-redux中mapStateToProps无法注入props?

Question

问题描述

想通过react-redux和redux实现react组件之间的通信,reducer、action、store都编写正确,mapDispatchToProps也能正确传值.唯独mapStateToProps的功能不正确,其里面的state值也会根据传值改变,但是render里打印this.props只有第一次的值,后面再传入值都不再渲染到props

截图

1. 输入第一次内容: Props有内容
   
2. 输入第二次内容: Props内容依然保持第一条不变,并且生命周期、Render均不进入
   
   Props也只有最初的一条
   

相关代码

//mapStateToProps(接收数据)
function mapStateToProps(state){
    console.log(state.user);
    return {
        users:state.user
    }
}

AppContent = connect(mapStateToProps)(AppContent)

export default AppContent;

//reducer.js
let infoBox = [];

function put_in_infoBox(action){
    infoBox.push(action);   //每新增一条数据就存入infoBox数组中
}

function sendMsg(state,action){
    if(!state){
        //如果无数据
        return {
            user:{}
        }
    }

    switch(action.type){
        //action.type从action.js中获取,并随着dispatch一起发送
        case 'SEND':
            //处理数据
            put_in_infoBox(action);
            console.log(infoBox);
            return {
                user:infoBox
            }
        
        default:
            return state;
    }
}

export default sendMsg

//store.js
//创建中转数据存储库
import reducer from './reducer'

import { createStore } from 'redux' 

const store = createStore(
    reducer,
)

export default store

export const sendMsgAction = ({name,message}) => ({
    type:'SEND',
    name,
    message
})

//mapDispatchToProps(发送数据)

const mapDispatchToProps = (dispatch)  => {
    return {
        //传值
        onSendMsg({name,message}){
            // console.log(message);
            dispatch(sendMsgAction({name,message}));
        },

    }
}

AppFoot = connect(
    null,
    mapDispatchToProps
)(AppFoot)

export default AppFoot;

效果

1. 应有效果:this.props是mapStateToProps每次更改state后的值
2. 实际效果:this.props目前只显示第一组传入数据

Answer 1

infoBox的引用一直是同一个，被react-redux内置的shallow compare给过滤掉了。

改变infoBox的引用就好， [...infoBox]或者infoBox.slice()都可以

Answer 2

reducer 给 createStore() 之前用 combineReducers() 处理一下你的 reducer