Redux 升级到 4.0的注意事项及迁移指南-JavaScript中文网-JavaScript教程资源分享门户

Redux是现今前端开发中最常用的全局状态管理库之一，而升级到Redux 4.0也是开发者们必不可少的一环。为了帮助开发者更好地完成升级，本文将介绍Redux 4.0版本的注意事项以及迁移指南。

注意事项：

1. React-Redux版本更新

升级到Redux 4.0版本，需要将React-Redux升级至v7.0.0及以上版本。因为React-Redux v7.0以上的版本使用的是Redux 4.0的新API。

2. createStore API 更新

Redux 4.0版本中，createStore API进行了更新。原来的第三个参数(enhancer)被移除，现在只接受两个参数(reducer, preloadedState)：

const store = createStore(reducer, preloadedState)

在更改时需要将原来的配置项移除，同时更改调用方式。

3. 插件 applyMiddleware

Redux 4.0版本中，applyMiddleware API进行了更新。原来的applyMiddleware函数返回的是一个enhancer，现在它会直接返回一个store enhancer：

import { applyMiddleware } from 'redux'

const store = createStore(
  reducer,
  preloadedState,
  applyMiddleware(thunk, logger)
)

4. combineReducers API 更新

Redux 4.0版本中，combineReducers API进行了更新。之前的combineReducers将所有reducers组合成一个对象，新的API中返回的是一个函数，用于调用reducer集合中的每个reducer。

import { combineReducers } from 'redux'

const allReducers = combineReducers({
  counter: counterReducer,
  todos: todosReducer
})

迁移指南:

下面，我们将详细介绍Redux 4.0版本的代码迁移指南。

1. 更改 createStore API 的调用方法

原有代码(使用中间件)：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(
  reducer,
  preloadedState,
  applyMiddleware(thunk)
)

新的调用方式：

import { createStore } from 'redux'

const store = createStore(
  reducer,
  preloadedState
)

2. 更改 applyMiddleware 应用中间件的调用方法

原有代码：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(
  reducer,
  preloadedState,
  applyMiddleware(thunk)
)

新的调用方式：

import { createStore, applyMiddleware } from 'redux'

const store = createStore(
  reducer,
  preloadedState,
  applyMiddleware(thunk, logger)
)

3. 更改 combineReducers 调用方式

原有代码：

import { combineReducers } from 'redux'

const allReducers = combineReducers({
  counter: counterReducer,
  todos: todosReducer
})

新的调用方式：

import { combineReducers } from 'redux'

const allReducers = (state, action) => ({
  counter: counterReducer(state.counter, action),
  todos: todosReducer(state.todos, action)
})

通过以上的几个步骤，我们可以轻松地将项目从Redux 3.x版本迁移到Redux 4.0版本，带来更高效、更好的使用体验。

示例代码：

下面是一个Redux 3.x版本使用createStore方式的示例代码：

-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ ----- ---- -------------
------ ------ ---- --------------

----- ------------ - -
  ------ -
-

----- -------------- - ------ - ------------- ------- -- -
  ------ ------------- -
    ---- ------------
      ------ - ------ ----------- - - -
    ---- ------------
      ------ - ------ ----------- - - -
    --------
      ------ -----
  -
-

----- ----- - ------------
  ------------
  ---------------------- -------
-

------ ------- ------

下面是将代码升级到Redux 4.0后的写法：

-- -------------------- ---- -------
------ - ----------- - ---- -------
------ ----- ---- -------------
------ ------ ---- --------------

----- ------------ - -
  ------ -
-

----- -------------- - ------ - ------------- ------- -- -
  ------ ------------- -
    ---- ------------
      ------ - ------ ----------- - - -
    ---- ------------
      ------ - ------ ----------- - - -
    --------
      ------ -----
  -
-

----- ----------- - ------ - --- ------- -- --
  -------- ----------------------------- -------
--

----- ----- - ------------
  ------------
  ---------------------- -------
-

------ ------- ------

总结：

Redux 4.0版本中的更改，虽然不多，但是也与之前的版本有些差异。通过本文，我们希望为读者提供更好的迁移指南和注意事项，并示范如何通过示例代码升级项目到最新版本的Redux。这样，就可以更好地贴合React-Redux的新API，并更好的运用在日常的项目中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/647d829c968c7c53b084c579