@reduxjs/toolkit配置react-redux解决createStore或将在未来被淘汰警告

通常我们用redux都需要通过 createStore

但目前你去用它基本都会被划线甚至有点厉害的的编辑器他会直接告诉你这个东西基本快被弃用了
在这里插入图片描述
这个应该大家都知道最好不要用已经被明确未来或弃用的语法因为一旦弃用这个系统就需要维护而且说一般会被淘汰的语法本身也就是有一定缺陷存在的

要用我这种方式redux react-redux的依赖肯定是要有的
要不然就手动引入一下

npm i --save redux react-redux

这里我们先终端输入

npm i --save @reduxjs/toolkit

引入一下依赖
在这里插入图片描述
然后我们在src目录下创建一个目录叫 redux 在这个目录下创建一个store.js
这是我个人习惯的形式
然后在redux 目录下创建一个文件夹叫 balanceSlice
下面创建一个 index.js
参考代码如下

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

const balanceSlice = createSlice({
    name:"balance",
    initialState: {
      cont: 1
    },
    reducers: {
        setCont(state,action) {
            state.cont = action.payload
        }
    }
})

export const { setCont } = balanceSlice.actions;

export default balanceSlice.reducer;

这里我们定义了一个全局变量cont 然后编写了修改这个全局变量的函数 setCont
接受一个参数用于修改 cont
然后 redux目录下的store.js 更改代码如下

import { configureStore } from "@reduxjs/toolkit";
import balanceReducer from "./balanceSlice";

const store = configureStore({
  reducer: {
    balance: balanceReducer
  }
});

export default store;

引入刚才写的balanceSlice 并完成配置

然后我们在要用全局内容的组件引入处这样写
在这里插入图片描述
用 react-redux 下的 Provider组件包裹上
然后 store来源于我们自己写的 redux/store
然后我们在需要用的组件中这样写

import React from 'react';
import { useSelector, useDispatch } from "react-redux";
import { setCont } from "../redux/balanceSlice";

export default function Balance() {
  const state = useSelector((state) => state.balance.cont);
  const dispatch = useDispatch()
  return (
    <div>
      测试组件{state}
      <button onClick={()=>{
        dispatch(setCont(10))
      }}>修改一下</button>
    </div>
  );
}