React Native中使用redux

一、了解redux

react-redux 文档 · Redux：Redux 中文文档

安装

# NPM
npm install redux

# Yarn
yarn add redux

附加包

多数情况下，你还需要使用 React 绑定库和开发者工具。

# NPM
npm install --save react-redux
npm install --save-dev redux-devtools

# Yarn
yarn add react-redux

创建store

store下面添加两个文件

• index.js   仓库的入口文件
• reducer.js   创建初始状态，并导出一个函数

redux基础概念

Redux 是什么？

首先理解 “Redux” 是什么。它有什么作用？它帮助我解决什么问题？我为什么要使用它？

Redux 是一个使用叫做 “action” 的事件来管理和更新应用状态的模式和工具库

它以集中式 Store（centralized store）的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新。

为什么要使用 Redux？

Redux 帮你管理“全局”状态 - 应用程序中的很多组件都需要的状态。

Redux 提供的模式和工具使你更容易理解应用程序中的状态何时、何地、为什么、state 如何被更新，以及当这些更改发生时你的应用程序逻辑将如何表现.

Redux 指导你编写可预测和可测试的代码，这有助于你确信你的应用程序将按预期工作。

我什么时候应该使用 Redux？

Redux 可帮助你处理共享状态的管理，但与任何工具一样，它也需要权衡利弊。使用 Redux 有更多的概念需要学习，还有更多的代码需要编写，需要添加了一些额外代码，并要求你遵循某些限制。这是短期和长期生产力之间的权衡。

在以下情况下使用 Redux：

• 应用中有很多 state 在多个组件中需要使用
• 应用 state 会随着时间的推移而频繁更新
• 更新 state 的逻辑很复杂
• 中型和大型代码量的应用，很多人协同开发

Redux Toolkit 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，我们强烈建议你使用它。

术语

Action

action 是一个具有 type 字段的普通 JavaScript 对象。你可以将 action 视为描述应用程序中发生了什么的事件.

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Action Creator

action creator 是一个创建并返回一个 action 对象的函数。它的作用是让你不必每次都手动编写 action 对象：

const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}//这个addTodo就是一个action creator

Reducer

reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

reducer 函数内部的逻辑通常遵循以下步骤：

• 检查 reducer 是否关心这个 action

1. 如果是，则复制 state，使用新值更新 state 副本，然后返回新 state

• 否则，返回原来的 state 不变

const initialState = { value: 0 }
 
function counterReducer(state = initialState, action) {
  // 检查 reducer 是否关心这个 action
  if (action.type === 'counter/increment') {
    // 如果是，复制 `state`
    return {
      ...state,
      // 使用新值更新 state 副本
      value: state.value + 1
    }
  }
  // 返回原来的 state 不变
  return state
}

Store

当前 Redux 应用的 state 存在于一个名为 store 的对象中。

store 是通过传入一个 reducer 来创建的，并且有一个名为 getState 的方法，它返回当前状态值：

import { configureStore } from '@reduxjs/toolkit'
 
const store = configureStore({ reducer: counterReducer })
 
console.log(store.getState())
// {value: 0}

Dispatch

Redux store 有一个方法叫 dispatch。

更新 state 的唯一方法是调用 store.dispatch() 并传入一个 action 对象。 store 将执行所有 reducer 函