problem description
to realize the communication between react components through react-redux and redux, reducer, action and store are all written correctly, and mapDispatchToProps can also pass values correctly. Only the function of mapStateToProps is incorrect, and the state value in it will be changed according to the value passed, but the this.props printed in render only has the value of the first time, and then the input value will not be rendered to props
.Screenshot
- enter content for the first time: Props has content
- : Props,Render
Props
related codes
//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.typeaction.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 storeexport 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;effect
- should have an effect: this.props is the value of mapStateToProps after each change of state
- actual effect: this.props currently displays only the first group of incoming data