React Redux - 使用 react 钩子调度操作

Question

澄清一下，我对react-redux的概念很陌生。我尝试在演示组合中调度异步操作，但这似乎不起作用。

容器组件

const store = configureStore();
const Root: React.FC = () => (
    <Provider store={store}>
        <App />
    </Provider>
);
render(<Root/>, document.getElementById('root'));

表现组件

interface AppProps {
    system: SystemState,
    updateSession: typeof updateSession,
    getLanguageThunk: any
}
const App: React.FC<AppProps> = ({system, updateSession, getLanguageThunk}) => {
    useEffect(() => {
        getLanguageThunk().then((res: any) => {
            console.log(res);
            i18n.init().then(
                () => i18n.changeLanguage(res.language));
       });
    }, []
);
    return (
            <div>
                <div className="app">
                    <TabBar/>
                </div>
            </div>
    );
};
const mapStateToProps = (state: AppState) => ({
    system: state.system
});
export default connect(mapStateToProps, { updateSession, getLanguageThunk })(App);

但控制台每次日志都未定义。所以我在这里做错了什么。也许你们中的一些人可以在这里帮助我。

冗余中间件

export const getLanguageThunk = (): ThunkAction<void, AppState, null, Action<string>> => async dispatch => {
    const language = await getLanguage();
    dispatch(
        updateSession({
            disableSwipe: false,
            language
        })
    )
};
async function getLanguage() {
    try {
        const response = await fetch('http://localhost:3000/language');
        return response.json();
    } catch {
        return { language: 'en_GB' }
    }
}

Answer 1

你需要从 getLanguageThunk 返回语言，以便能够在 useEffect 方法中从 promise 中使用它

export const getLanguageThunk = (): ThunkAction<void, AppState, null, Action<string>> => async dispatch => {
    const language = await getLanguage();
    dispatch(
        updateSession({
            disableSwipe: false,
            language
        })
    )
    return language;
};