Redux传统写法无法读取store更新状态问题求助

核心问题点 #

功能失效、控制台无报错是两个问题叠加导致的：

• 组件未正确调用绑定了dispatch的action方法：mapDispatchToProps已经将绑定store.dispatch的capitalizeLetters注入到组件props，但组件解构props时仅取出了capitalize状态，没有取出注入的方法；按钮点击时调用的是文件顶部直接import的原生action creator，这个方法仅返回一个需要接收dispatch参数的函数，直接调用不会触发任何store更新，也不会抛出异常。
• action写法冗余：当前逻辑为纯同步操作，不需要使用Redux Thunk的异步action写法，若项目未配置redux-thunk中间件，即使正确触发dispatch也会报错。

修复代码 #

1. 修正组件内的方法引用 #

组件内调用props注入的、已绑定dispatch的action方法，不要直接调用import的原生action：

// Capitalize.jsx
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { capitalizeLetters } from '../actions/capitalizeActions';

const Capitalize = ({ capitalize, capitalizeLetters }) => {
    const [query, setQuery] = useState('');
    return (
        <div>
            <input
                type='text'
                placeholder='Capitalize Me...'
                onChange={e => setQuery(e.target.value)}
            />
            <button onClick={() => capitalizeLetters(query)}>Enter</button>
            <p>{capitalize}</p>
        </div>
    );
};

const mapStateToProps = state => ({
    capitalize: state.capitalize.value,
});

const mapDispatchToProps = dispatch => ({
    capitalizeLetters: query => dispatch(capitalizeLetters(query)),
});

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

2. 简化同步action写法 #

去掉不必要的thunk函数包裹，同步action直接返回标准action对象即可：

// capitalizeActions.js
import { CAPITALIZE_LETTERS } from './actionTypes';

export const capitalizeLetters = letters => ({
    type: CAPITALIZE_LETTERS,
    payload: letters,
});

无需修改的部分 #

你写的capitalizeReducer和rootReducer逻辑是正确的，不需要调整。

验证 #

修复后点击按钮会正常走Redux更新流程：输入内容点击按钮后，dispatch将输入值传给reducer，reducer转大写后更新store，组件订阅到状态变化自动渲染大写结果。

内容的提问来源于stack exchange，提问作者Ronny Fitzgerald