@reduxjs/toolkit的使用

        之前使用react的都知道，全局状态管理redux的配置有多麻烦，配置store，reducer，actions，而且项目一旦大起来，很多个reducer，actions文件看着头痛，现在官方推出了一个新的编写redux的方法就是@reduxjs/toolkit，它极大地简化了配置，帮助我们从action/reducer地狱从解脱出来，步骤如下：

一、配置store

        这一步核心api是configureStore，它帮助我们方便地配置store，包括合并 reducer、添加 thunk 中间件以及设置 Redux DevTools 集成，示例如下：

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../reducer/user";
import orderReducer from "../reducer/order";


export default configureStore({
    reducer: {
        user: userReducer    //key: Reducer
        order: orderReducer
    }
});

        如果需要合并多个reducer时，只需要在reducer对象里定义一个键用于区分不同的reducer即可，注意在子组件获取数据时需要多调用一层，如：store.user.userName

二、配置reducer

        这一步用到的核心api是createSlice，与之前reducer写法不同，之前action以及reducer需要分开配置，而使用createSlice允许我们定义一个仓库initialState，以及其相关actions放置于reducers对象下，然后将其暴露出去，子组件可以直接在dispatch中调用，示例如下：

import { createSlice } from "@reduxjs/toolkit";

const UserState = createSlice({
    name: "user",
    initialState: {
        userName: ""
    },
    reducers: {
        setUserName: (state, action) => {
            /*
             *  action包含2个属性，
             *  type: "user/setUserName"  
             *  payload: 通过dispatch调用此函数时传的值 
            */
            state.userName = action.payload;
        }
    }
});

//将action暴露出去
export const { setUserName } = UserState.actions;

export default UserState.reducer;

  到这一步，我们的store就配置完成了，是不是跟以前相比简单多了，这就是toolkit的魅力！

三、引入Provider

import {Provider} from "react-redux";
import Main from "./main";
import store from "../store";

function App(){
    return (
        <Provider store={store}>
           <Main />
        </Provider>
    )
}

export default App;

四、子组件调用

import { useDispatch, useSelector } from "react-redux";
import { setUserName } from "reducer/user";


function Child(){
    const dispatch = useDispatch();
    const state = useSelector(state=>state);
    const { userName } = state.user;
    
    const clickMethod = () => {
        dispatch(setUserName("ggbond"));
    }

    return (
        <button onClick={clickMethod}>click me</button>
    )
}

        到此整个redux全局状态管理就配置完成了，不知道你们舒服了没有反正我是舒服了！