老师您好，dispatch只运行一次，确执行了两次，是什么原因

Question

图片需要点击才能查看完整的图片。

//langSlice.ts
import { createSlice, PayloadAction,createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
import {api} from "../config/api";

export interface LangType{
    id: number | undefined;
    name: string | undefined;
    label: string | undefined;
}

export interface LanguageState {
    loaded: boolean,
    language: LangType,
    languageList: LangType[];
}

const defaultState: LanguageState = {
    loaded: false,
    language: { id: 1, label: "简体中文", name: "zh-cn" },
    languageList: [
        { id: 1, label: "简体中文", name: "zh-cn" },
        { id: 2, label: "繁体中文", name: "zh-tw" },
    ],
};


export const getLangs = createAsyncThunk(
    "lang/langs",
    async (p, thunkAPI) => {
        console.log("22222");
        const {data} = await axios.get(api.i18n.langs);
        return data.data;
    }
);

export const langSlice = createSlice({
    name: 'lang',
    initialState: defaultState,
    reducers: {
        changeLang: (state, action: PayloadAction<LangType>)=>{
            state.language = action.payload;
        }
    }, 
    extraReducers: {
        [getLangs.fulfilled.type]: (state, action: PayloadAction<LangType[]>) => {
            let languageList = action.payload;
            let langCode = localStorage.getItem("i18nextLng") || window.navigator.language || 'zh-cn';
            langCode = langCode.toLocaleLowerCase();
            
            let lang = languageList.find( lng => lng.name == langCode);
            if(!lang){
                lang = languageList[0];
            }

            state.language = lang;
            state.languageList = languageList;

            console.log(state.languageList);
        },
    },
});

Answer 1

阿莱克斯刘 2021-06-14 09:30:53

你可以试试把dispatch放进 useEffect hook 中，通过副作用来控制dispatch的时机

• 提问者 慕村5307545 #1

  谢谢，老师，我刚才加了个  document.title = t(''); 然后出现无限的getLangs()了，我才想起你说那个无限call后台的useEffect， 我就把，document.title,和getLangs(),都放进了useEffect里面解决了。

• 阿莱克斯刘 #2

  ok，就是这样，反正只要是。涉及到组件状态转换都需要使用副作用来处理