Redux Tool Kit(RTK)的使用

一、RTK是什么？

RTK是redux的开发工具,以配置的方式编写redux逻辑,能减少样板代码和错误代码,其中还内置了redux-thunk等一些基础插件, redux官方强烈推荐使用RTK。

二、RTK的使用

2.1 安装

yarn add @reduxjs/toolkit

2.2 使用

action.js

// todoList
const ADD = 'ADD';
const REMOVE = 'REMOVE';
const SET_COMPLETE = 'SET_COMPLETE';

// userInfo
const ADD_USERINFO = 'ADD_USERINFO';
const REMOVE_USERINFO = 'ADD_USERINFO';


// todoList

export function add(id, text) {
  return { type: ADD, id, text };
};

export function remove(id) {
  return { type: REMOVE, id };
};

export function setComlete(id, complete) {
  return { type: SET_COMPLETE, id, complete }
};


// userInfo

export function addUserInfo(userInfo) {
  return { ...userInfo, type: ADD_USERINFO };
};

export function removeUserInfo() {
  return { type: REMOVE_USERINFO };
};


export default { ADD, REMOVE, SET_COMPLETE, ADD_USERINFO, REMOVE_USERINFO, add, remove, setComlete };

reducer.js

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

export const todoListSlice = createSlice({
  name: 'todoList',
  initialState:  [
    { id: '1', text: '游泳', complete: false },
    { id: '2', text: '冥想', complete: false },
    { id: '3', text: '工作', complete: false },
    { id: '4', text: '午休', complete: false },
    { id: '5', text: '追番', complete: false },
  ],
  reducers: {
    add: (state, action) => {
      return [...state, { id: action.payload.id, text: action.payload.text, complete: false, }];
    },
    remove: (state, action) => state.filter(t => t.id !== action.payload.id),
  }
});

export const userInfoSlice = createSlice({
  name: 'userInfo',
  initialState: {},
  reducers:{
    add: (state, action) => ({ id: action.id, text: action.text, complete: false }),
    remove: (state, action) => state.map(t => t.id === action.id ? t : { ...t, complete: action.complete })
  },
});

store.js

import { todoListSlice, userInfoSlice } from './reducer';
import { configureStore  } from  '@reduxjs/toolkit';

const store = configureStore({
  reducer:{ todoList: todoListSlice.reducer,userInfo: userInfoSlice.reducer}
})
export default store;

List.jsx

import { memo, useCallback, useState, useMemo } from 'react';
import { Input, Button } from 'antd';
import { connect } from 'react-redux';
import { todoListSlice } from './reducer';


// 将redux的state映射到props
const mapStateToProps = (state) => {
  return { todoList: state.todoList };
};

// 将redux的dispatch映射到props
const mapDispatchToProps = (dispatch) => {
  return {
    onAdd: (id) => dispatch(todoListSlice.actions.add({ id, text: `新增数据${id}` })),
    onRemove: (id) => dispatch(todoListSlice.actions.remove({ id })),
  }
};

// 实现一个TodoList
function List(props) {
  const [id, setId] = useState('0');

  const onInputChange = useCallback((e) => {
    setId(e.target.value);
  }, []);

  const renderList = useMemo(() => {
    console.log(props.todoList, 'props.todoLis')
    return props.todoList.map(todo => {
      return <div style={{ marginTop: '20px' }} key={todo.id}>
        <div>名称:{todo.text}</div>
        <div>ID:{todo.id}</div>
        <div>状态:{todo.complete ? '完成' : '未完成'}</div>
      </div>
    })
  }, [props.todoList]);

  return (
    <div className="App" style={{ textAlign: 'center' }}>
      <span>id:  <Input onChange={onInputChange} value={id} type='text' /></span>
      <Button onClick={() => props.onAdd(id)}>增加</Button>
      <Button onClick={() => props.onRemove(id)}>删除</Button>
      {renderList}
    </div>
  );
}

export default memo(connect(mapStateToProps, mapDispatchToProps)(List));

传送门: RTK