Redux Action 没有被传递给 reducer答案

【问题标题】：Redux Action not getting passed to reducerRedux Action 没有被传递给 reducer
【发布时间】：2022-01-13 13:58:09
【问题描述】：

我试图让我的文本框在用户在框中键入内容时更新字数。但是 setWordCount 操作没有传递给减速器。我不知道为什么这不起作用。

在故障排除过程中，我确认该组件正在按照应有的方式取消初始字数计数状态。我还确认当用户键入内容时会调用 setWordCount。这应该触发将更新的字数传递给状态的操作，但它不会触发。我在控制台中没有收到任何错误，并且我的中间件记录器都没有触发。

这是我的组件。

import React from 'react';
import { connect } from 'react-redux';
import { setWordCount } from '../../redux/writing/writing.actions';
import { UpdateWordCount, UpdatePercentage } from '../../redux/writing/writing.utils';

import './writing-text-box.styles.scss';

const WritingTextBox = ({wordCount, goal}) => {
    
    var updatedPercentage = UpdatePercentage(wordCount, goal);
    var percent = updatedPercentage + '%';
    
    return (
        <div className='writing-box-container'>
            <textarea className='writing-box' type='text' onChange={
                (e) => {
                  setWordCount(UpdateWordCount(e.target.value));
                }
            }
            />
            <div id='Progress'>
                <div id='Bar' style={{width: percent}}></div>
            </div>
            <p key='writing-box-word-count' className='wordcount' >
                {wordCount} / {goal}</p>
        </div>
    )}

const mapStateToProps = state => ({
    wordCount: state.writing.wordCount, 
    goal: state.writing.goal, 
    percentage: state.writing.percentage
});

const mapDispatchToProps = dispatch => ({
    setWordCount: ({wordCount}) => dispatch(setWordCount(wordCount)),
    // setPercentage: percentage => dispatch(setPercentage(percentage)),
});

export default connect(mapStateToProps, mapDispatchToProps)(WritingTextBox);

这是我的操作文件，几乎是从另一个可用的应用程序复制粘贴的：

import WritingTypes from "./writing.types";

export const setWordCount = wordCount => ({
    type: WritingTypes.SET_WORD_COUNT,
    payload: wordCount,
});

还有我的减速机：

import WritingTypes from "./writing.types";

const INITIAL_STATE = {
    wordCount: 0, 
    goal: 124, 
    percentage: 0
}

const writingReducer = (currentState = INITIAL_STATE, action) => {
    switch(action.type) {
        case WritingTypes.SET_WORD_COUNT: 
            return {
                ...currentState,
                wordCount: action.payload
            };
        default:
            return currentState;
    }
}

export default writingReducer;

和我的根减速器：

import { combineReducers } from "redux";

import writingReducer from "./writing/writing.reducer";

const rootReducer = combineReducers ({
    writing: writingReducer
})

export default rootReducer;

【问题讨论】：

标签： reactjs redux react-redux redux-reducers

【解决方案1】：

您需要对命名更加小心。目前，setWordCount 是以下名称：

动作创建者，它只是创建动作对象。

 export const setWordCount = wordCount => ({
 type: WritingTypes.SET_WORD_COUNT,
 payload: wordCount,
 });

分派动作的道具。

 setWordCount: ({wordCount}) => dispatch(setWordCount(wordCount)),

这里应该是第二个：

<textarea className='writing-box' type='text' onChange={
            (e) => {
              setWordCount(UpdateWordCount(e.target.value));
            }
        }
        />

为了让它工作，从 props 中解构它：

const WritingTextBox = ({wordCount, goal,setWordCount}) => {

现在它指向道具，并按预期工作。

【讨论】：