Redux总结

1 redux工作流

1). store的创建(唯一性)

1. import createStore from 'redux'
2. 创建ruducer.js 文件
3. 将 import ruducer from './ruducer' 引入
4. const store = createStore(ruducer) 调用ruducer产生初始的state
5. 使用Redux DevTools 加 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

2). reducer

 1. 他是个纯函数（给固定的输入，就会给你出固定的输出，不能对原参数的数据进行修改）
 2. 根据老的state和action,产生新的state
 3. 不能直接修改老的state,深拷贝的方式（JSON的方法）
 const defaultState = {
    变量
 }
 export default (state= defaultState, action ) => {
    判断逻辑并将 oldstate 和 action 产生 newstate 
    return state
 }

3). store行为（component组件中）由 store调用

1. getState()方法 得到当前的状态值
2. dispatch(action) 分发action, 内部调用rudecer得到新的state,更新state，调用监听回调
3. subscribe(callback) 订阅更新的监听（重新渲染组件）
4. store是唯一的
5. 只有store能改变自己的内容

4). store内部数据

 reducer函数
 state

5). action creators

1. 用来创建action对象的函数
2. action = {type: 'XXX', yyy: data}

2 拆分action中的type actiontypes 都在store文件夹中创建( 好处报错能找到具体位置 )

    1. 创建 actiontypes.js
    2. 编写 文件 例如 export const XXX = 'xxx' XXX是type类型的大写方式
    3. 组件中引入 actiontypes.js （结构赋值的方式）
    4. reducer中引入 actiontypes.js （结构赋值的方式）

3 使用actionCreator统一创建action

    1. 创建 actionCreator.js
    2. 编写 文件 例如 export const 函数名字 = （value） =>({type: XXX, value}) 首先引入actiontypes.js
    3. 组件中引入 actionCreator.js （结构赋值的方式引入方法）

4 redux中的组件

    1. ui组件只注重ui和渲染,没有逻辑
    2. 容器组件只注重逻辑,没有ui
    3. 无状态组件 只有render函数-> 可以用函数代替，性能高

5.使用redux-thunk中间件进行ajax请求发送 （thunk使action不单是对象，也可以是个函数）

    1. 下载

	   npm install redux-thunk

    3. 引入

       import { createStore, applyMiddleware } from 'redux';
       import thunk from 'redux-thunk';
	   import rootReducer from './reducers/index';
	   // Note: this API requires redux@>=3.1.0
	   const store = createStore(
	      rootReducer,
	      applyMiddleware(thunk)
       );

    3.注意window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

       import { createStore, compose, applyMiddleware } from 'redux';
	   import thunk from 'redux-thunk';
	   import reducer from './reducer';
	   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
	   const store = createStore(reducer, composeEnhancers(
		  applyMiddleware(thunk)
	   ));
	   export default store;

    4.把ajax代码放在actionCreator.js中 

      export const getTodolist = () => {
         return (dispatch) = {
            axios.get(url) .then(() =>{
              const data = res,data
              const action = initListAction(data)将action对象传入
              dispatch(action)
            })
         }
       }

    5.组件componentdidMount中调用返回action函数，并dispatch（action函数）

6.redux中间件

1.rudux中间件是action creator与store之间的中间件
2.其实就是对dispatch的一个升级，dispatch本身只能派发对象，使用thunk之后可以派发函数

7.redux-saga使用

    1.为什么使用
        redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件
    2.下载

	  npm install --save redux-saga

    3.创建
        创建 Saga.js

      function* mySaga() {
       }
       export default mySaga;

    4.引入

		import { createStore, compose, applyMiddleware } from 'redux';
	+   import createSagaMiddleware from 'redux-saga'
	+   import mySaga from './Saga'
		import reducer from './reducer';
    +   const sagaMiddleware = createSagaMiddleware()
		const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
		const store = createStore(reducer, composeEnhancers(
    +      applyMiddleware(sagaMiddleware)
		));
	+   agaMiddleware.run(mySaga)
		
		export default store;

    5.把ajax代码放在actionCreator.js中 

      export const getTodolist = () => ({
         type: GET_TODO_LIST
       })

    6.在actiontypes.js中写入GET_TODO_LIST
    7.组件componentdidMount中调用getTodolist（），返回action,并派发给store
    8.在saga.js中(generator 函数)

      import { takeEvery, put} from 'redux-saga/effects'
      import axios from 'axios
      function* getTodolist (){
        yield res = axios.get(url)
        const data = res.data
        const action = initListAction(data)将action对象传入
        yield put(action)
      
      }
      function* mySaga() {
        yield takeEvery(ActionType, getTodolist);
      }  
      export default mySaga;

8.react-redux使用（第三方插件）

    1.下载

	   npm install --save react-redux

    2.引入
      在index.js中

      import store from './store';
      import {Povider} from 'react-redux'
      const App = {
        <Povider store={store}><需要渲染的根组件A/></Povider>
      }
      ReactDOM(App, document.getElementById('root'))

   3.使用
     在组件中

         import {conncet} 'react-redux'
        const mapStateToProps = (state) => {
         return {
           值名：state.值
         }
        }
        const mapDispatchToProps = (dispatch) => {
         return {
           处理点击的等函数
         }
        }
        export defalut conncet(mapStateToProps, mapDispatchToProps)(需要渲染的根组件A)
        
        使用 this.props.值名 this.props.处理点击函数