Redux 新教程Redux Toolkit的使用

关于更新redux 

唏嘘~还是跟不上时代的步伐了，哭唧唧~，花费了不少的时间学习完redux后，还没用就发现官网的redux更新了新的使用用法 Redux Toolkit，于是乎硬着头皮翻译了一遍官网的Redux Toolkit，整理出最新的redux用法，不得不说，更新的好啊！

Redux Toolkit 今天是如何使用Redux

从官网翻译出来了几句话：

它开箱即用的高效 Redux 开发工具集，是 redux 新的库，也是官方推荐今后在项目中使用的 redux 库，内置了immer、redux-thunk和redux-devtools。

即使对于现有的应用程序，我们也建议至少将createStore切换为configureStore，因为开发模式中间件也可以帮助您捕获现有代码库中的意外突变和可序列化错误。我们还希望鼓励您将最常用的减速器（以及将来编写的任何减速器）切换到createSlice-代码将更短、更容易理解，安全改进将为您节省时间和精力。

redux核心包仍然有效，但今天我们认为它已经过时了。它的所有API也都是从@reduxjs/toolkit重新导出的，configureStore完成了createStore所做的一切，但具有更好的默认行为和可配置性。

所有的动作创建者和动作类型都是自动生成的，reducer代码更短，更容易理解。在每种情况下，实际更新的内容也更加清晰。这意味着您编写的代码可以非常简单。

so，根据官网介绍：Redux Toolkit从两个关键API configureStore 和 createSlice 开始，它们简化了您在每个Redux应用程序中所做的最常见的事情：

• configureStore 通过单个函数调用建立一个配置良好的Redux存储，包括组合reducers、添加thunk中间件和设置Redux-DevTools集成。它也比createStore更容易配置，因为它采用了命名选项参数。
• createSlice 允许您编写使用Immer库的reducer，以便使用state.value=123这样的“mutating”JS语法编写不可变的更新，而不需要点差。它还自动为每个reducer生成 动作（action）创建者函数，并根据reducer的名称在内部生成动作类型字符串。最后，它与TypeScript配合使用非常好。

官网的demo 

官网的demo例子作为参考：

features/todos/todosSlice.js

import { createSlice } from '@reduxjs/toolkit'

const todosSlice = createSlice({
  name: 'todos',
  initialState: [], // 数据状态初始值
  reducers: {
    todoAdded(state, action) {
      state.push({
        id: action.payload.id,
        text: action.payload.text,
        completed: false
      })
    },
    todoToggled(state, action) {
      const todo = state.find(todo => todo.id === action.payload)
      todo.completed = !todo.completed
    }
  }
})

export const { todoAdded, todoToggled } = todosSlice.actions
export default todosSlice.reducer

使用configureStore代替createStore，存储设置可以简化为：

app/store.js

import { configureStore } from '@reduxjs/toolkit'
import todosReducer from '../features/todos/todosSlice'
import filtersReducer from '../features/filters/filtersSlice'

export const store = configureStore({
  reducer: {
    todos: todosReducer,
    filters: filtersReducer
  }
})

更新内容介绍

• 在新的用法中：redux出了一个新的工具包  Redux Toolkit  
• 引入了新的 api configureStore 和 createSlice
• configureStore通过单个函数调用建立一个配置良好的Redux存储，包括组合reducers、添加thunk中间件和设置Redux-DevTools集成。它也比createStore更容易配置，因为它采用了命名选项参数。
• redux摒弃了action的单独调用使用，而是和reducer做了融合更新，体现在createSlice 函数中，createSlice自动为每个reducer生成动作（action）创建者函数，并根据reducer的名称在内部生成动作类型字符串。
• redux摒弃了combineReducers合并reducer的单独调用使用，而是使用了configureStore 通过单个函数调用建立一个配置良好的Redux存储，其中就包括组合reducers。

Redux Toolkit用法

  引入configureStore  store/index.js

import { configureStore } from '@reduxjs/toolkit'

  configureStore 配置存储仓库  store/index.js

import todosReducer from '../store/reducer/todo'
import filterStateRudecer from '../store/reducer/filter'

export const store = configureStore({
    reducer: {
        todos: todosReducer,
        filterState: filterStateRudecer
    }
})

// 默认导出reducer每个模块下的action所有方法，方便在页面以/store路径引入使用
export * from './reducer/todo' ==》 相当于 下面这种方法导出了ruducer中的action
export const { todoAdded, todoToggled} = todosSlice.actions

createSlice 配置reducer reducer/todo.js

import { createSlice } from '@reduxjs/toolkit'

// 默认值：
const initialState = [
    { id: 1, text: '吃饭', done: true },
    { id: 2, text: '学习', done: false },
    { id: 3, text: '睡觉', done: true }
]

const todosSlice = createSlice({
    name: 'todos',
    initialState: initialState,
    reducers: {
        todoAdded(state, action) {
            const newstate = JSON.parse(JSON.stringify(state))
            newstate.push({
                id: newstate.length === 0 ? 1 : newstate[newstate.length - 1].id + 1,
                text: action.payload,
                done: false
            })
            return newstate
        },
       todoToggled(state, action) {
       },
    }
})

export default todosSlice.reducer

根文件 index.js

// 导入 Provider 组件
import { Provider } from 'react-redux'
// 导入创建好的 store
import store from './store'
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#root')
)

todoMain.js 组件

​​​​​​​import { useSelector, useDispatch } from 'react-redux'

// 访问 list状态
const list = useSelector(state => state.todos) 

// 修改 list状态
const dispatch = useDispatch()
dispatch(todoAdded(inputValue))