redux mapDispatchToProps 未更新 state

Question

我是 redux 的新手，遇到了 mapDispatchToProps 的問題，我的 react 應用程序中有一個具有不同 div 的組件，每次用戶單擊 div 時，它應該通過參數更改所選顏色，然后再次作為支柱。

我從最初的 state 獲得道具，但無法讓 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 作為 object 傳遞，在這種情況下，如果我理解正確，每個 function 都應該用調度自動包裝？ 並且沒有傳遞第二個參數來連接並將調度作為道具，直接在點擊時調度動作，但就像我說的兩種方法都失敗了

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 中使用重組分配，它很常見，使您的代碼更具可讀性和更好的調試性。