学习redux的笔记（一）---参考阮一峰老师的总结

  1. 设计思想
    1. web应用是一个状态机，视图与状态是一一对应的。
    2. 所有的状态，保存在一个对象里面；
  2. 基本概念和API
    1. store就是保存数据的地方，你可以把它看做一个容器。整个应用智能有一个Store。redux提供createStore这个函数，用来生成Store；
      1. import { createStore} from ‘redux’；const store = createStore（fn）；
      2. 上面的代码中，createStore函数接受另一个函数作为参数，返回新生成的store对象；
    2. state
      1. state对象包含所有数据。如果你想得到某个时点的数据，就要对store生成对照。这种时点的数据集合，就叫state；当前时刻的state，可以通过store.getState（）拿到。
      2. import {createStore} from ‘redux'; const store = createStore(fn); const state = store.getState();
      3. redux 规定，一个state对应一个view。只要state相同，view就相同，你知道，state就知道view是什么样子，反之亦然。
    3. Action
      1. state的变化，会导致view的变化，但是，用户接触不到state，只能接触到view。所以，state的变化必须是view导致的。action就是view发出的通知，便是state应该要发生变化了。
      2. action是一个对象，其中的type属性是必须的，便是action的名称。其他属性可以自由设置。
      3. const action = {type:"ADD_TODO",payload:"Learn Redux"};
      4. 上面代码，action的名称是“ADD_TODO”；他携带的信息是字符创 learn Redux。可以这样理解，action描述当前发生的事情，改变state为一个的办法，就是使用action。她会运送数据到store；
    4. Action Creator
      1. view要发送多少种消息，就会有多少种action，如果手写，很麻烦，可以定义一个函数来生成action，这个函数就叫action creator；
      2. const ADD_TODO = “添加 TODO”； function addTodo（text） {return {type:ADD_TODO,text}} const action = addTodo("learn redux");
      3. addTodo函数就是一个action creator
    5. store.dispatch()
      1. store.dispatch()是view发出action的唯一方法。
      2. import{createStore} from 'redux'; const store = createStore(fn); store.dispatch({type:"ADD_TODO",payload:'Learn redux'});
      3. store.dispatch接受一个action对象作为参数，将它送出去，结合action creator，代码如下：
      4. store.dispatch(addTodo('learn redux'));
    6. reducer
      1. store收到action，必须给出一个新的state，这样view才会发生变化。这种state的计算过程叫做reducer。
      2. reducer是一个函数，他接受action和当前state作为参数，返回一个新的state。
      3. const reduser = function（state,action）{ return new_state；}
      4. 整个应用的初始状态，可以作为state的默认值。下面是一个实际的例子：
      5. const defaultState = 0； const reducer = （state = defaultState, action) =>{ switch (action.type) {case'ADD':return state+action.payload; default: return state;} }; const state = reducer(1,{type:"ADD",payload:2});
      6. 实际应用中，reducer函数不用像上面手动调用，store.dispatch方法会触发reducer的自动执行。为此，store需要知道reducer函数，做法是咋生成store的时候，将reducer传入createStore 方法。
      7. import { createStore} from 'redux'; const store = createStore(reducer); createStore接受reducer作为参数，生成一个新的store。以后每当store.dispatch发送过来一个新的antion，就会自动调用reducer，得到新的state。
      8. const acitons = [ {type:"A",payload:0},...] const total = actions.reduce(reducer,0);数组actions便是依次有三个action，分别是加0，加1，加2，数组的reduce方法接受reducer函数作为参数，就可以直接得到最终的状态3。
    7. 纯函数
      1. reducer函数最重要的特征就是，他是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。
      2. 纯函数是函数式变成的概念，必须遵守一些约束：不得改写参数；不能调用系统I/O的api；不能调用Data.now()或者Math.random等不纯的方法，因为每次回得到不同的结果。
      3. reducer函数不能改变state，必须返回一个全新的对象；
      4. function reducer(state,action) { return Object,assign(){},state,{thingToChange}); return {...state,...newState} }
      5. function reducer（state,action）{ return[...state,newItem];}最好把state对象设成只读的，要想改变他，就要获取新的state。这样的好处是，任何时候，与某个view对应的state总是一个不变的对象。
    8. store.subscribe()
      1. store允许使用store.subscribe 方法设置监听函数，一旦state发生变化，就自动执行这个函数。
      2. import { createStore } from"redux"; const store = createStore(reducer); store.subscribe(listener);
      3. 显然，只要把view的更新函数（就是render或者setState方法）放入listen，就会实现view的自动渲染。store.subscribe方法返回一个函数，调用这个函数就可以解除监听。
      4. let unsubscribe = store.subscribe(() => console.log(store.getState())); unsubscribe();
    9. store的实现：store提供了三种方法；
      1. store.getState（）
      2. store.dispatch( )
      3. store.subscribe( )
      4. import { createStore }from 'redux'; let{ subscribe,dispatch,getState } = createStore(reducer);
      5. createStore方法可以接受第二个参数，便是state的最初状态，这通常是服务器给出的。
      6. let store = createStore(todoApp,window.STATE_FROM_SERVER//整个应用的状态初始值。注意，如果提供了这个参数，它会覆盖reducer函数的默认初始值);
    10. reducer的拆分
      1. reducer负责生成state,由于整个应用只有一个state对象，包含所有的数据，对于大型应用来说，这个state必然十分庞大，导致reducer函数也十分庞大。
      2. combineReducers方法，用于reducer的拆分，只要定义各个子reducer函数，然后用这个方法，将他们合成一个大的reducer.
      3. import { combineReducers } from 'redux'; const chatReducer = combineReducer({chat,status,user}) export default todoApp;combineReducers方法将三个子reducer合并成一个大的函数，这种写法有一个前提，就是state的属性名必须与子reducer同名，如果不同名，就要采取：const reducer = combineReducers({ a: doA,b:doB,c:doC});
      4. 可以把所有子Reducer放在一个文件里面，统一引入。
  3. 工作流程
    1. 用户发出action:store.dispatch(action);
    2. store自动调用Reducer，并且传入两个参数（当前的state,收到的action）,reducer会返回新的state：let nextState = todoApp(previousState,action);
    3. state一旦有变化，store就会调用监听函数：store.subscribe(listener);
    4. listener可以通过store.getState()得到当前状态。如果使用的是react,这时可以出发重新渲染view ：function listener() { let newState = store.getState();component.setState(newState);}
posted @ 2017-04-11 09:19  雨停了  阅读(1072)  评论(0)  编辑  收藏  举报