Redux Action 没有被传递给 reducer

Posted 2023-02-19

【中文标题】Redux Action 没有被传递给 reducer

【英文标题】：Redux Action not getting passed to 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;

【参考方案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) => 

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