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 of mapDispatch 代替: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