Redux-核心概念

是什么

Redux是一个JavaScript状态管理工具，它被广泛用于React应用程序。Redux具有可预测性和可扩展性，使状态管理更加简单和可控。

核心概念

Action

Action是在应用程序中描述发生了什么的普通JavaScript对象。它们是用来描述发生的事件的，并返回一个类型和描述信息。例如：

{
  type: 'ADD_TODO',
  text: 'Add Redux article'
}

Reducer

Reducer是负责处理应用程序状态的纯函数。它接收先前的状态和一个Action作为输入，并返回新状态。一个Reducer描述了在应用中如何更新状态。

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'TOGGLE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: !todo.completed
          })
        }
        return todo
      })
    default:
      return state
  }
}

Store

Store是应用程序状态的容器。它有以下责任:

• 提供访问状态的getState()方法。
• 允许更新状态的dispatch(action)方法。
• 提供订阅状态变化的subscribe(listener)方法。

import { createStore } from 'redux'
import todos from './reducers'

const store = createStore(todos)

console.log(store.getState())

const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

store.dispatch({
  type: 'ADD_TODO',
  text: 'Add Redux article'
})

unsubscribe()

组合Reducers

在大型应用程序中，您将需要利用多个Reducer来管理状态。Redux提供了combineReducers()方法，用于将多个Reducer组合成一个单独的Reducer。

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'

const todoApp = combineReducers({
  todos,
  visibilityFilter
})

export default todoApp

结论

Redux为开发人员提供了一种简单且可靠的解决方案，用于管理应用程序的状态。通过使用这个工具，您可以使您的代码更加可预测和可扩展。希望这篇文章对您有所帮助！