reduxjs/toolkit使用

react+reduxjs/toolkit使用

npm install reduxjs/toolkit -S
npm install redux -S

在store/index.js入口页面中引入 configureStore 容器

import { configureStore } from '@reduxjs/toolkit'; //承载容器
import test from "./test/test";  //引入store组件

//创建一个redux
export default configureStore({
  reducer:{  //释放
    test,
  }
})

在test/test.js页面中引入 createSlice 创建切片

import {
    createSlice,//创建切片
    createAsyncThunk,//创建一个一步的Action 有三个状态  pending（等待） fulfilled(成功) rejected（失败）
} from '@reduxjs/toolkit'
export const createTest = createSlice({
    name:'test', //每个切片的名字
    initialState:{ //默认数据
       count:1
    },
    reducers:{ //改变action的方法   action:{payload:接受传进来的值}
        add:(state,{payload})=>{
            state.count = state.count+payload.value
        }
    },
    extraReducers:{ //引入其他方法  额外触发其他切片slice中的关联状态
        // [引入的方法](state,{payload}) = >{
             //先掉引入的方法
            //  触发本页面的 redux
        // }

    }
})

export const {add} = createTest.actions; //公开action的方法 方便页面引入

export default createTest.reducer   //暴露reducer

在页面中使用 首先在app.js入口页引入 Provider 跟引入跟本地store

import './App.css';
import Root from './router/router.js'  //引入路由
import { ConfigProvider } from 'antd'; //antd 国际化
import zhCN from 'antd/lib/locale/zh_CN';
import { Provider } from "react-redux"; //react-redux 包裹标签 
import store from "./store/indx";

function App() {
  return (
    <Provider store={store}>
          <div className="App">
                  <ConfigProvider locale={zhCN}>
                    <Root />
                </ConfigProvider>
                
              </div>
    </Provider>
   
  );
}

export default App;

在使用页 引入本地store的暴露方法 引入 useDispatch触发redux useSelector使用redux中暴露的方法

import {useDispatch,useSelector} from 'react-redux'
import { add } from '../../store/test/test'; //引入定义的方法
const Other = ()=>{
    const { count} = useSelector((state)=>state.test) //指向index.js下的test
    const dispath = useDispatch(); //触发redux
      return (
        <div>
            首页
            <p>{count}</p>
             <button onClick={()=>{
                dispath(add({value:4}))
             }}>我用redux加</button>
            </div>
      )
}
export default Other

实际效果 每次点击加4

完结