ReactNative|ReactNative Redux flow ReactNativeReduxflow

关于Redux,理解Redux flow的工作逻辑图

文章图片
Redux flow
1. Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch()将 action 传到 store。

添加新 todo 任务的 action 是这样的：

const ADD_TODO = 'ADD_TODO'

Action 创建函数

function addTodo(text) { return { type: ADD_TODO, data: text } }

Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。

dispatch(addTodo(text));

store 里能直接通过 store.dispatch() 调用 dispatch() 方法，但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用。bindActionCreators()可以自动把多个 action 创建函数绑定到 dispatch() 方法上。

文章图片
image.png

(property) dispatch: Dispatch (action: any) => any

也就是 :

import { Dispatch } from 'redux'; export const setSomeText = ( dispatch: Dispatch, ) => { ...... dispatch(addTodo(text)) };

2. Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

在 Redux 应用中，所有的 state 都被保存在一个单一对象中。建议在写代码前先想一下这个对象的结构。如何才能以最简的形式把应用的 state 用对象描述出来？
dispatch数据之后, 也就是传入store之后,如果要获取数据.

const InitState: string ='hello world'; const getSomeText = ( state = InitState, action: { type: string; data: string } ): string => { const { type, data } = action; switch (type) { default: return state; case ADD_TODO: return data as string; } };

以 todo 应用为例，需要保存两种不同的数据：

当前选中的任务过滤条件；
完整的任务列表。

3. Store

Store 就是把它们Action和Reducer联系到一起的对象。Store 有以下职责：

维持应用的 state；
提供getState()方法获取 state；
提供dispatch(action)方法更新 state；
通过 subscribe(listener) 注册监听器;
通过subscribe(listener)返回的函数注销监听器。

再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合而不是创建多个 store。
对Redux flow理解
1.UI界面的事件, 通过Action将数据传递到Reducer
2.Reducer通过哪种过滤条件和怎么样的数据格式将数据更新到Store.
3.Store通过存储在Store中的state元素, setState更新.
4.setState发生变化, 重新render渲染
值得注意 : dispatch(action) 中 action返回的是一个对象, 最终是一个对象, 所以dispatch(对象) , 更新某一个对象. 【ReactNative|ReactNative Redux flow】PS : 如果是要dispatch(function)呢, 这里就需要用到一个中间件 redux-thunk
思考 : 那么dispatch(对象) 能做到更新store中的值, 那么dispatch(function)的应用场景是什么?