javascript - Redux 消费者没有将更新的 props 传递给 React 组件

问题描述

redux@6.0.0

我正在努力将 redux 添加到服务器端呈现的 React 应用程序中。该应用程序的架构是一个黑匣子，但我已经按照文档中的这个示例成功设置了 redux。

我可以从 redux 存储中读取数据并将其呈现在屏幕上。我可以调度更新商店的操作。这些变化会逐渐渗透到Context.Consumer（并且可以在 React DevTools 中验证），但会止步于此。尽管进行了更改，但在初始挂载后，该值永远不会传递给组件。

我在这里读到“99.9% 的时间”这是由于 mutating state 造成的。所以我添加了另一个带有样板值和操作的商店来更新它：

const ACTIONS = {
    SET_RANDOM_TEST_VALUE: 'SET_RANDOM_TEST_VALUE',
}

const initialState = {
    testValue: 'intial test value', // I now see this typo, but the screenshots are final ‍♂️
}

export const setRandomTestValue = () => ({
    type: ACTIONS.SET_RANDOM_TEST_VALUE,
})

export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case ACTIONS.SET_RANDOM_TEST_VALUE: {
            return {
                ...state,
                testValue: String(Math.random()).slice(-5),
            }
        }
        default: {
            return state
        }
    }
}

我的测试减速器被添加到rootReducer：

import { reducer as testReducer } from './TestStore.redux'

const rootReducer = combineReducers({
    // ...
    __test__: testReducer,
})

然后将值映射到组件：

/* Import assets */

const Test = props => {
    console.count('Render count')
    return (
        <div>
            <button onClick={props.setRandomTestValue}>Update value</button>
            <code>{props.testValue}</code>
        </div>
    )
}

export default connect(
    state => ({ testValue: state.__test__.testValue }),
    { setRandomTestValue }
)(Test)

有了这个设置，一切似乎都正常。控制台日志Render count: 1，组件显示initial test value——一切如预期：