Question

我是Redux的新手，遇到了mapDispatchToProps问题，我在我的react应用程序中有一个具有不同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？并且不传递第二个参数来连接并以调度为道具，直接在点击时调度操作，但就像我说的两种方法都失败

Answer 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)),
});

您的行动和减速器：

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中使用重组分配，这种情况非常普遍，它使您的代码更具可读性，并且调试起来更好。

redux mapDispatchToProps不更新状态

1 个答案: