我是 redux 新手,遇到了 mapDispatchToProps 的问题, 我的 React 应用程序中有一个具有不同 div 的组件,每次用户单击 div 时,它都应该通过参数更改所选颜色,然后将其作为 prop 再次传递。
我从初始状态获取 Prop ,但无法让 mapDispatchToProps 正常工作。 似乎有不同的方法来处理mapDispatchToProps,我尝试了一些但没有工作, 这就是我目前所拥有的,没有错误但仍然无法运行
组件:
import React from 'react';
import { connect } from 'react-redux';
import { changeSelectedColor } from '../actions/actions';
const ColorPalette = ({ selectedColor, changeSelectedColor }) => {
return(
<div>
<div className='flex justify-center mb-2'>
<p>Selected color: {selectedColor}</p>
</div>
<div className='flex justify-center mb-2'>
<button onClick={() => changeSelectedColor('test')} className='border border-black'>
click to change
</button>
</div>
</div>
)
}
const mapStateToProps = (state) => {
return {
selectedColor: state.colorReducer.selectedColor,
}
}
const mapDispatchToProps = (dispatch) => {
return {
changeSelectedColor: (color) => dispatch(changeSelectedColor(color))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ColorPalette);
reducer :
import { combineReducers } from "redux";
const initialState = {
selectedColor: 'black',
};
const colorReducer = (state = initialState, action) => {
switch(action.payload) {
case 'SET_SELECTED_COLOR':
console.log('changing color to ', action)
return {...state, selectedColor: action.payload};
default:
return state;
}
}
export default combineReducers({
colorReducer,
});
Action :
export const changeSelectedColor = (color) => {
return {
type: 'SET_SELECTED_COLOR',
payload: color
}
}
我还尝试将mapDispatchToProps作为对象传递,在这种情况下,如果我理解正确的话,每个函数都应该自动用dispatch包装?并且不向 connect 传递第二个参数,并将调度作为 Prop ,直接在单击时调度操作, 但就像我说的,两种方法都失败了
最佳答案
问题来自于您的 reducer :
const colorReducer = (state = initialState, action) => {
switch(action.type) { // <== here should be type not payload
case 'SET_SELECTED_COLOR':
console.log('changing color to ', action)
return {...state, selectedColor: action.payload};
default:
return state;
}
}
建议(与答案无关)
编写如下连接函数:
const mapStateToProps = ({ colorReducer: { selectedColor } = {} }) => ({
selectedColor,
});
const mapDispatchToProps = dispatch => ({
changeSelectedColor: color => dispatch(changeSelectedColor(color)),
});
还有你的 Action 和 reducer :
export const changeSelectedColor = payload => ({
type: 'SET_SELECTED_COLOR',
payload,
});
const colorReducer = (state = initialState, { type, payload }) => {
switch (type) {
case 'SET_SELECTED_COLOR':
return { ...state, selectedColor: payload };
default:
return state;
}
};
在ReactJS中使用重组赋值,它很常见,可以让你的代码更具可读性和更好的调试性。
关于javascript - redux mapDispatchToProps 不更新状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61290525/