@reduxjs/toolkit的基本用法一

@reduxjs/toolkit的基本用法一

道阻且长，行而不辍，未来可期

这里只讲了同步用法哦

1.安装@reduxjs/toolkit

yarn add @reduxjs/toolkit react-redux

2.创建一个slice

@reduxjs/toolkit管模块叫切片slice,slice相当于vuex中的module

user.ts的完整代码

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

interface UserState {
  name: string;
  age: number;
}
const initialState: UserState = {
  name: '纸崩',
  age: 20
}

/**
 * 创建slice,在rtk里面叫切片,相当于vuex里面的模块
 * 使用createSlice方法创建一个slice。每一个slice里面包含了reduce和actions
 * 可以实现模块化的封装。so,与user相关的操作都在该slice(切片)中完成
 */
export const userSlice = createSlice({
  name: 'user',//命名空间,可以自动把每一个action进行独立,解决了action的type出现同名的文件,在使用的时候会默认使用name/actionName
  initialState,//state数据的初始值

  //reducers里面包裹的是同步方法
  reducers: {
    //定义的action,由于内置了immutable插件,可以直接使用赋值的方式进行数据的改变,
    //不需要每一次都返回一个新的state数据
    setName(state, action: PayloadAction<string>) {
      //第一个参数 state 为当前state中的数据
      //第二个参数action为{payload,type:'user/setName'}
      //payload 为传过来的新参数
      // type 为action触发的类型
      state.name = action.payload
    },
    setAge(state, action: PayloadAction<number>) {
      state.age = action.payload
    }
  }
})

// 导出actions
export const { setName, setAge } = userSlice.actions;

3.挂载slice

index.ts的完整代码：

import { configureStore } from '@reduxjs/toolkit'
import { userSlice } from './slices/user';


//configureStore挂载每一个modules
const store = configureStore({
  reducer: {
    user: userSlice.reducer//user module
  },
  devTools: true
})

//定义 ts types
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;


//导出store
export default store;

4.挂载store到根节点

import { Provider } from 'react-redux';
//引入store
import store from './store/index';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

5.在组件中使用user slice中的state的数据，以及reducers中包裹的同步方法

Home.tsx的完整代码：

//在组件内部,使用useState和useDispatch可以直接获取state数据与dispatch方法
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../store';
//引入action
import { setName, setAge } from '../store/slices/user';

const person = {
  name: 'aa',
  age: 19
}
export function Home() {
  //5.获取user切片,使用user中的state中的数据：user.name
  //这里的useSelector 结构出来的 user是切片的命名空间的名字，不是随便写的
  const { user } = useSelector((state: RootState) => state);
  const dispatch = useDispatch();

 //6.使用user slice中定义的同步方法
  return (
    <div>
      <p>{user.name}</p>
      <button onClick={() => dispatch(setName("山海"))}>设置name</button>
    </div>
  )
}

6.运行结果