从React-Redux迁移到@ reduxjs / toolkit

我一直在使用react-redux，我很喜欢它，使用react是很棒的，但是它会很快变得混乱，所以当我被介绍给redux时，我立刻就喜欢它。 问题是……当我使用yarn create ract-app --template redux创建一个应用程序时，该应用程序的语法与在youtube上看到的所有教程中教给我的语法不同，因此我开始使用默认应用程序，而且他们的处事方式更加简洁明了。 在Google进行快速搜索之后，我意识到默认应用使用@ redux / toolkit，我想谈一谈它，因为它非常棒，所以…

什么是@ reduxjs / toolkit？

来自GitHub官方仓库：[@ reactjs / toolkit]是react-redux的正式，有根据的工具集，它旨在成为编写Redux逻辑的标准方法，并且擅长于完成其工作。 （在我看来）这需要很多看起来很奇怪的代码，并使它们更有意义。

在本文中，我将逐一介绍工具包中包含的API，以及如何从标准方法进行转换，以及对该操作的用途进行一些说明（以防万一，复习😉）。

就在我开始之前，重要的是要说这个工具包与常规语法完全兼容（据我所知），因此您可以将它们混合使用。

建立动作

这些动作是您将从React应用调用以与Redux商店进行交互的“功能”的名称，它们的名称将在化简器上进行切换（我们将在后面讨论），以及一个有效负载是否需要更改状态。

const createBook = book => {
  type : 'CREATE-BOOK' ,
  payload : book
};

const clearFilter = () => {
  type : 'CLEAR_FILTER'
};

//then you can call them

createBook(book);
clearFilter();

这个过程可以创建很长的文件，并且增加了很多样板。 该工具包使用createAction自动创建类型并接收成为action.payload的单个参数，如下所示。

import createAction from '@reduxjs/toolkit'

const createBook = createAction( 'CREATE_BOOK' );
const clearFilter = createAction( 'CLEAR_FILTER' );

// and the you call them

createBook(book);
clearFilter();

在使用createReducer时，我们可以使用以这种方式创建的动作，但首先让我们检查一下。

创建减速器

还原器是与redux商店进行交互的后半部分，如果动作是名称，则还原器是商店在收到动作名称时将要执行的过程，它在开始时也让我感到困惑，但是有些代码和实践解决了这个问题，所以我们开始，通常是一个reducer，它是一个Switch，在其中切换动作名称，然后启动一个过程，如下所示：

const bookReducer = ( state = [], action ) => {
switch (action.type) {
    case 'CREATE_BOOK' :
      return [...state, action.payload.book];
    case 'REMOVE_BOOK' :
      if (index === -1 ) {
        return [...state];
      }
      return [ ...state.slice( 0 , index),
               ...state.slice(index + 1 ), ];
    default :
      return [...state];  }
};

reducer接受一个初始状态，在这种情况下，是一个空数组，然后是我们要从中提取类型的操作。

需要提及的重要一点是，像这样的标准化简器要求您在不修改状态本身的情况下制作化简器，例如，您不能使return state.splice（0,1）成为可能，因为splice修改了数组谁在叫它。 createReducer并非如此，因为默认情况下它使用沉浸式 ，这使您可以编写可变代码。 因此，我们最终得到了一个简单得多的结果：

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

const bookReducer = createReducer( [], { 
 CREATE_BOOK : ( state, action ) => {state.push(action.payload);},
 REMOVE_BOOK : ( state, action ) => {state.splice(action.payload, 1 );}
});

就像我之前提到的，如果您使用createAction创建动作，则可以在此处将它们与计算属性语法一起使用：

import { createReducer, createAction } from '@reduxjs/toolkit' ;

const createBook = createAction( 'CREATE_BOOK' )

const bookReducer = createReducer( [], { 
 [CREATE_BOOK]: ( state, action ) => { state.push(action.payload); },
});

创建切片

这是一个很大的功能，使用createSlice可以将创建动作和创建reducer组合到一个大型的，易于阅读（和理解）的函数中，观看起来很漂亮：

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

const bookStoreSlice = createSlice(){
  name : 'bookStore' ,
  initialState : []
  reducers:{
  createBook : ( state, action ) => { state.push(action.payload); },
  removeBook : ( state, action ) => { state.splice(action.payload, 1 );}
  }
}

const { createBook } = bookStoreSlice.actions;

const bookReducer = bookStoreSlice.reducer;

//then just call it

createBook(book);

这段代码创建了动作和化简器，很棒吗？，我们现在唯一需要的是将这种化简器提供给商店的一种方法，是的，该工具箱有一个很好的方法来做到这一点。

配置商店

通常，您可以使用createStore来完成…创建商店并在提供程序中使用它，但是如果您有多个reducer，则需要将它们组合，命名并使用它们，如下所示：

import { combineReducers, createStore } from 'redux' ;

const rootReducer = combineReducers({
  books : bookReducer,
  filter : filterReducer,
});

const store = createStore(  rootReducer,  initialState,);

使用该工具包，您可以将这两个功能合二为一，还可以添加所需的中间件（本文已经过长，因此稍后我将讨论中间件）。

import { configureStore } from '@treactjs/toolkit' ;

const store = configureStore({
  reducer : {
    books : bookReducer,
    filter : filterReducer
  }
});

最后的想法

Reactjs / toolkit有很多功能，但仅凭这些基础知识，以及在状态下编写可读代码和可变代码的能力，我看不出为什么不在新的或已经创建的应用程序中使用该工具包。

该工具包具有出色的文档 ，并且会不断维护。 感谢您抽出宝贵的时间阅读本文档，希望对您有所帮助。 下一个见。

先前发布在 https://medium.com/@yosept.flores/from-react-redux-to-reduxjs-toolkit-42344c9d2832

翻译自: https://hackernoon.com/moving-from-react-redux-to-reduxjstoolkit-55133u3c