react-native中使用redux

渣渣宇a
718 阅读5分钟

说明

首先redux不是每个项目都会用到的。这个插件主要服务于中大型项目，内部有复杂的页面结构以及频繁的更新状态，这个时候当前页面内的状态会非常乱且难以维护，这时候就需要以集中处理的方式去整理state，redux就可以拿来用

安装

redux - 本体

react-redux - 依赖

redux-thunk - 让redux有异步的action事务

核心关键词、方法

action

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

type 字段为必填，若有附加信息，则添加到第二个字段 payload 当中

example：

const calculatorAddAction = {
    type: 'add',
    payload: 'calculator add 1'
}

reducer

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

  • 仅使用 state 和 action 参数计算新的状态值
  • 不能直接修改state，需要以复制的方式代替旧的state(扩展运算符, concant) 保证其 不可变更新（immutable updates）
  • 不允许使用异步，依赖随机值或其他导致产生 ‘副作用’ 的代码

reducer函数内部逻辑需要遵循以下规则：

  • 如果没有进任何判断进行更新state，那么默认返回state

内部可以使用 if-else 或者 switch 等循环判断 example

image.png

combineReducers

描述：可以将单个 reducer 分成多个不同组件的reducer，最后通过 combineReducers 方法进行整合

image.png

dispatch()

描述：更新 state 的唯一方法是调用 store.dispatch() 内部传入一个action对象。store 将执行所有 reducer 函数并计算出更新后的 state，调用 getState() 可以获取新 state。

image.png

store

描述：当前 Redux 应用的状态存在于一个名为 store 的对象中。

Store 全局唯一的一个对象 可以看作应用 state 的集合 , 也就是说你在任意组件中都可以通过 store 拿到你想要的 state

Provider

在入口文件中使用 Provider 包裹住 App，并且传入 store 即可在全局拿到 redux 中存储的所有状态

image.png

redux-thunk

reducer是一个纯函数，不应该修改传入的参数，不应该有执行有副作用的API 请求和路由跳转，不能调用非纯函数。只要传入参数相同，返回计算得到的下一个 state 就一定相同，单纯执行计算。 通过 redux-thunk 可以让action异步执行，action创建函数除了返回 action 对象外还可以返回函数，当返回函数时，这个函数会被执行，接收一个参数为dispatch。这个函数并不需要保持纯净。

connect

描述：在当前页面中绑定数据到store。connect需要mapStateToProps方法返回的一个Reducer，mapStateToProps方法有个参数state，这个是Store统一管理的state，也就是根节点。

image.png

mapStateToProps(state, ownProps)

描述：允许我们将 store 中的数据作为 props 绑定到组件上

state 是 Redux 的 store,从中摘取 calculator 到 props 中 ownProps 是组件自己的props

mapDispatchToProps(dispatch, ownProps)

image.png 在组件的 props 中直接执行 return 出的方法即执行 dispatch

执行流程

页面内点击按钮触发事件，事件方法内执行对应的dispatch，传入相应的action作为type。reducer中监听，传入type，根据if-else判断进入对应的逻辑处理，return出state的复制体，更新state。 connect中的mapStateToProps中的state参数更新拿到最新的state，随后return内的参数更新到组件的props当中。

example&使用(加减计算器)

目录结构

image.png

action

actionType.js

专门用于存放action中用到的type，便于管理

image.png

CalculatorAction.js

处理某个页面内的action。

image.png

函数内return出该aciton内用到的type，这样虽然麻烦，但是胜在清晰，包括以后要添加payload参数的话 导出action处理函数在组件内使用，这里的t是组件中传入的type用于在此函数中。 return 后箭头函数内的dispatch参数是组件中进行connect之后就可以获取到了。

然后根据组件中传入的t判断不同场景分别进行不同的dispatch

reducer

calculatorReducer.js

这里处理 action 中调用的 dispatch 方法

image.png

根据actionType中定义的type进行不同的处理。 并导出该页面的reducer函数

reducer/index.js

使用 combineReducers 函数将不同组件的reducer组合到一起

image.png

并导出组合之后的 rootReducer

store.js

image.png 使用redux提供的applyMiddleware方法添加redux-thunk，并导出创建的store。 rootReducer作为createStore函数(此时已经是添加完中间件的新方法)的参数使用

index.js(入口文件)

使用react-redux提供的 Provider 组件对App组件进行包裹，并传入store使得全局可拿到sotre内的数据

image.png

view/redux.js(使用到redux的组件)

image.png

首先使用 connect 将组件和 store 链接起来，使得在 props 中获取到 dispatch。 connect 中传入 mapStateToProps 函数，该函数内的 state 中拿到该组件需要用到的目标参数calculator并 return 出去，这时在 props 中即可拿到。

页面中引入当前页面的action，然后在按钮点击事件中dispatch一个action函数，该函数内传入对应的action中定义的参数。

结语

到这里整个流程就跑通了，此为初始。然后这里建议在安装插件的时候注意一下安装版本，最好在npm中看一下常用版本使哪个并安装此版本。

avatar
文章
阅读
粉丝