React Native开发Web前端之路

redux学习(上)

2017-12-05  本文已影响68人  NSO

依照惯例,开头先放出redux中文文档地址

使用react当然要配套学习redux,本文就对redux学习进行一个总结。

redux的作用:简言之就是一整套框架帮助管理状态(state),至于状态管理的最佳实践这应该是另一个很大的话题了,这里就不多讨论了,对于初次使用redux的用户而言最简单的建议就是“先接受框架提供的方式,当你觉得完全理解了这些后再考虑按自己的思路优化、改进”。

redux三大基础概念

这里我们改变一下文档的介绍顺序(文档可能是按首字母排序的),我按照我认为比较容易理解的思路叙述一遍。

Store

首先,使用redux管理状态(state),那么state到底放在哪儿维护呢?所有的statestate树)都放在store中,而且是一个单一的store
创建store可以通过redux提供的API createStore

createStore(reducer, [preloadedState], enhancer)
reducer(Function):接收两个参数,分别是当前state树和要处理的action
[preloadedState] (any):可选参数,给定初始state
enhancer(Function):返回的还是store creator

例子:

import {createStore} from 'redux';
import  todos from './reducers'; 
let store = createStore(todos, ['use Redux']);

store提供几个API,让我们操作state

getState():获取state
dispatch(action):更新state
subscribe(listener):注册监听器
subscribe(listener):返回的函数注销监听器

PS:请特别注意这个函数接收的第一个参数是reducer,意味着创建一个store我们必须提供的是reducer

Reducer

reducer是一个纯函数,接收旧的 stateaction,返回新的 state

(previousState, action) => newState

简单地阐述一下,reducer函数的奥义就是传入一个state然后根据action来返回新的state
有一个要点,返回的state不是通过修改原state得到的,需要返回的state应该是在副本上修改的结果。

另外,reducer可以拆分,最推荐的做法就是创建小的reducer,然后通过combineReducers()把小reducer合并。

Action

action 本质上是 JavaScript 普通对象。
action中会有一个type属性,作用就是触发特定的action

例子:
最简单的action可以只定义一个字符串

const action = 'start';

常见一点的会是一个对象

{
 type: TOGGLE_TODO,
 index: 5
}

还有action创建函数,返回一个action对象

function addTodo(text) {
    return {
       type: ADD
       text
   }
}

action创建完成后可以绑定给一个函数,后续就可以直接调用这个函数

const boundDispatchAddTodo = (text) => {dispatch(addTodo(text))};
···
boundDispatchAddTodo(text);

(未完待续)

上一篇下一篇

猜你喜欢

热点阅读