redux学习(上)

作者: NSO | 来源:发表于2017-12-05 16:20 被阅读68次

    依照惯例,开头先放出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);
    

    (未完待续)

    相关文章

      网友评论

        本文标题:redux学习(上)

        本文链接:https://www.haomeiwen.com/subject/lrgabxtx.html