redux mapDispatchToProps 不更新状态
Posted
技术标签:
【中文标题】redux mapDispatchToProps 不更新状态【英文标题】:redux mapDispatchToProps not updating state 【发布时间】:2020-08-01 01:41:25 【问题描述】:我是 redux 的新手,遇到了 mapDispatchToProps 的问题, 我的反应应用程序中有一个具有不同 div 的组件,每次用户单击一个 div 时,它都应该通过一个参数更改所选颜色,然后再次作为道具传递下去。
我从初始状态获取道具,但无法让 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);
减速器:
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,
);
动作:
export const changeSelectedColor = (color) =>
return
type: 'SET_SELECTED_COLOR',
payload: color
我也尝试过将 mapDispatchToProps 作为对象传递,在这种情况下,如果我理解正确,每个函数都应该用 dispatch 自动包装?并且不传递第二个参数来连接并且将调度作为道具,直接在点击时调度动作, 但就像我说的两种方法都失败了
【问题讨论】:
【参考方案1】:问题来自你的减速器:
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 中使用重组赋值,它很常见,可以让你的代码更具可读性和更好的调试性。
【讨论】:
更喜欢使用the "object shorthand" form ofmapDispatch
代替:const mapDispatch = changeSelectedColor
。
@markerikson,感谢您的可爱建议。我对你的一个帖子投了赞成票以表示感谢。
谢谢!不敢相信这是问题所在,我有点惭愧。关于重组的好建议,肯定会改变我的代码以上是关于redux mapDispatchToProps 不更新状态的主要内容,如果未能解决你的问题,请参考以下文章
为啥 mapStateToProps 和 mapDispatchToProps 不只是 Redux 中的一个函数?
如何测试从 mapDispatchToProps 传递的函数(React/Redux/Enzyme/Jest)
为啥我们已经有了 mapDispatchToProps 还需要 redux-thunk
markdown Redux容器:mapDispatchToProps
[Redux] Using mapDispatchToProps() Shorthand Notation
React Redux:使用 Enzyme/Jest 测试 mapStateToProps 和 mapDispatchToProps