如何使用Redux Toolkit从组件外部修改组件值？

我简化了无关代码，现有如下Redux Toolkit配置：

store文件 #

import { configureStore } from '@reduxjs/toolkit'
import topScreenTextReducer from './uiSlice'

export default configureStore({
    reducer: {
        topScreenText: topScreenTextReducer
    },
})

uiSlice文件 #

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
    value: 'some text',
}

export const uiSlice = createSlice({
    name: 'topScreenText',
    initialState,
    reducers: {
        updateTopScreenText: (state, action) => {
            state.value = action.payload
        },
    },
})

export const { updateTopScreenText } = uiSlice.actions

export default uiSlice.reducer

TopScreen组件 #

const TopScreen = () => {
    let topScreenText = getTopScreenText()
    return (
            <StyledTopScreenText>
                {topScreenText}
            </StyledTopScreenText>
    );
}

export default TopScreen;

我的问题是：如何从非组件文件（比如用于调整UI的startQuiz文件）修改topScreenText？这类文件中无法调用useDispatch。我在论坛看到类似问题但无明确答案，听说可用connect但找不到示例，且Dan Abramov不建议这么做，想知道正确实现方式，或者我的思路是否有误？

1. 直接在非组件文件中导入store实例并调用dispatch #

你的store已经默认导出，在非React组件的文件里可以直接导入这个store，然后调用store.dispatch()触发action，这是最直接的合理方式：

比如在startQuiz.js中：

import store from './store'
import { updateTopScreenText } from './uiSlice'

export const startQuiz = () => {
  // 其他业务逻辑...
  store.dispatch(updateTopScreenText('开始答题！'))
}

2. 修正TopScreen组件的状态获取方式 #

你的TopScreen组件里getTopScreenText()的写法无法实现状态的响应式更新，需要改用Redux的useSelector钩子：

import { useSelector } from 'react-redux'

const TopScreen = () => {
    const topScreenText = useSelector(state => state.topScreenText.value)
    return (
            <StyledTopScreenText>
                {topScreenText}
            </StyledTopScreenText>
    );
}

export default TopScreen;

关于connect的说明 #

connect是Redux为类组件设计的状态连接方案，函数组件推荐使用useSelector/useDispatch钩子。Dan Abramov不建议的是在函数组件中强行使用connect而非hooks，而非组件场景下直接调用store实例是完全合规的，不存在问题。

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