reduxjs/toolkit 分模块 状态注入

一般项目架构使用的是单个 store + 初始化时会生成的 rootReducer(这个reducer里只有公用的reducer)

  需要将所有reducer  都引入到rootReducer
如果需要使用 - 路由懒加载代码分割 - 的模式,那么会导致动态加载的业务模块对应的 reducer 不存在,所以会需要将当前 store 进行合并且重新注入,让业务模块的reducer 可以存在

项目根页面 引入 store

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


const render = () => {
     
  const App = require("./App").default;
  ReactDOM.render(
    <Provider store={
     store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>,
    document.getElementById("root")
  );
};

index.js // reducer

import {
      configureStore, combineReducers, Reducer } from '@reduxjs/toolkit';
import rootReducer, {
      staticReducers } from './rootReducer';
						//用户信息状态
						// store conf
const store = configureStore({
     
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
});
// 暴露一个函数 给外面懒加载 组件注入
export function injectReducer<State>(key: string, reducer: Reducer<State>) {
     
  asyncReducers[key] = reducer;
  const newRootReducer = combineReducers({
     
    ...staticReducers,
    ...asyncReducers,
  });
  store.replaceReducer(newRootReducer);
}
// 普通 dispatch
export type AppDispatch = typeof store.dispatch;

// 每当我们需要访问 Redux 存储状态时(mapState 函数 | useSelector 选择器)
export type RootState = ReturnType<typeof rootReducer>;

// thunk type
// export type AppThunk = ThunkAction>;

export default store;

configureStore()

combineReducers()

createSlice()

createAsyncThunk()

使用步骤

一、 index.js 中 引入并包裹

import {
      Provider } from 'react-redux'

import store from './reducers'

  <Provider store={
     store}>

        <React.StrictMode>

        <App />

      </React.StrictMode>

    </Provider>

二、创建 reducers 文件夹下 index.js

   import {
      configureStore, combineReducers } from '@reduxjs/toolkit'

   inport demo from './demo'

  const rootReducer = combineReducers({
      demo })

  const store = configureStore({
      reducer : rootReducer })

        export type RootState = ReturnType<typeof rootReducer>;

       export default store;

三 、 demo.js

   import {
     createSlice, createAsyncThunk } from '@reduxjs/toolkit'

const initialState={
     

    str1 : '',

    str2 : ''

};

export const setData = createAsyncThunk (

  'qwe/setData',

    ()=>{
      

            return 'we'

        }

)

const b = createSlice({
     

    name :'asd',

    initialState,

    reducers:{
     },

    extraReducers:(bui)=>{
     

        bui.addCase(setData.pending, (state)=>{
     

            state.str1 = '1'

        });

        bui.addCase(setData.fulfilled, (state,action)=>{
     

            console.log(action,'------')

            state.str1 = action.payload || ''

        });

        bui.addCase(setData.rejected, (state)=>{
     

            state.str1 = '3'

        });

    }

})

export default b.reducer;

// export const bActions = b.actions;  // 暂时还没理解用处 

四、 组件中使用

i


import './App.css';

// import { getUserInfo } from './reducers/userInfo';

import {
      setData } from './reducers/demo';

import {
      RootState } from './reducers';

function App() {
     

  const  dispatch  = useDispatch();

  const a = useSelector((state : RootState )=> state.demo.str1)

  useEffect(()=>{
     

    dispatch(setData())

  },[dispatch]);

  return (

    <div className="App">

        {
     a}

    </div>

  );

}

export default App;



文档地址 : https://redux-toolkit.js.org/

你可能感兴趣的:(javascript)