redux使用（一）

Redux的基本使用&&API介绍

1. Reducer
   1. Redux中负责响应action并修改数据的角色就是reducer
   2. reducer的本质其实是一个函数，其函数签名为：reducer(previousState，action) => newStatereducer(previousState，action) => newState
   3. reducer 只是一个模式匹配的东西，真正处理数据的函数，通常是额外在别的地方写的（固然直接写在reducer中也没问题，只是不利于后期维护）
   4. 不要直接修改传入的参数previousState，最好返回一个新的对象state
2. action
   1. 表明用户操做
   2. 规定必定有一个属性type,type属性必定是惟一的
   3. 若是全部的action都手写可能很麻烦，咱们定义一个action Creaters

      function addTo(num) {
          return {
              type: 'Increment',
              num
          }
      }
      export default addTo;

3. store
   1. Store 就是保存数据的地方，你能够把它当作一个容器。整个应用只能有一个 Store。
   2. Redux 提供createStore这个函数，用来生成 Store。

      import { createStore } from 'redux'
      import reducer from './reducer'
      
      let store = createStore(
          reducer
      )

   3. createStore的3个参数：
      • 参数1：reducer，
      • 参数2：preloadedState，state的初始值，通常由服务器给出，若是给了这个值，默认会覆盖reducer里的初始值
      • 参数3：enhancer，会对createStore进行加强后，再传入reducer和preloadedState，至关于一个高阶函数，返回结果：enhancer(createStore)(reducer, preloadedState)
4. state
   1. store对象包含全部的数据，若是咱们想得到当前这个时间点的数据，可使用store.getState();
5. dispatch
   1. 用户发出action修改state的惟一方法就是dispatch
   2. Store.dispatch(action);调用以后，会去执行reducer规则
6. subscribe
   1. 对state进行监听，一旦发生变化就会执行这个函数listener

      import { createStore } from 'redux';
      const store = createStore(reducer);
       
      store.subscribe(listener);

   2. 解除监听，经过subscribe返回的函数，执行以后能够接触监听

      let unsubscribe = store.subscribe(() =>
        console.log(store.getState())
      );
       
      unsubscribe();

       

connect&&Provier的使用

1. 为何要使用？
   • 使用redux咱们要实现视图的更新，须要先Store.getState()获取数据，使用Store.dispatch()更新数据，再使用Store.subscribe()去订阅这个更新，若是不少地方都这样作一遍，实在是不堪其重
   • 换个思路，把store直接集成到React应用的顶层props里面，只要各个子组件能访问到顶层props就好了，Provider正是这样一个经过context设置store的组件，而后在经过connect容器组件把“指定的state & 指定的action”和 React组件关联起来

1. Provider：将store传给组件

   import { Provider } from 'react-redux'
   import store from './store'
   
   ReactDOM.render(
   <Provider store={store}>
       <App />
   </Provider>
   , document.getElementById('root'));

2. connect：将组件与redux关联起来的高阶函数

   export default connect(
     mapStateToProps,
     mapDispatchToProps
   )(App);

3. mapStateToProps()：创建一个外部state到内部props的一个映射
   1. 是一个函数，接收state做为参数，返回一个对象，每个key表明一个内部的属性

      const mapStateToProps = (state) => {
        return {
          todos: getVisibleTodos(state.todos, state.visibilityFilter)
        }
      }
      //getVisibleTodos是一个自定义计算state的函数

   2. mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，从新计算 UI 组件的参数，从而触发 UI 组件的从新渲染。
   3. 能够接收第二个参数，表明容器组件的props值

      const mapStateToProps = (state, ownProps) => {
        return {
          active: ownProps.filter === state.visibilityFilter
        }
      }

   4. 使用ownProps做为参数后，若是容器组件的参数发生变化，也会引起 UI 组件从新渲染。
   5. connect方法能够省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引发 UI 组件的更新。
4. mapDispatchToProps():创建 UI 组件的参数到store.dispatch方法的映射
   1. 若是mapDispatchToProps是一个函数，会获得dispatch和ownProps（容器组件的props对象）两个参数。

      const mapDispatchToProps = (
        dispatch,
        ownProps
      ) => {
        return {
          onClick: () => {
            dispatch({
              type: 'SET_VISIBILITY_FILTER',
              filter: ownProps.filter
            });
          }
        };
      }

   2. 也能够是一个对象
5. 两个函数都是将属性映射到props上面，因此经过this.props.onClick这样去取值