react状态管理redux，react-redux，redux-thunk，redux-saga

• redux

   redux学习：数据流框架
   三部分：store，reducer（接收action并更新store），action
   1.创建个仓库：let store=createStore(myReducer)；//参数是reducer奥,createStore来源redux
   2.创建reducer，它是根据action更新state并返回新state，入参state和action，主要用type
   3.获取store数据：store.getState()
   4.更新页面：store的订阅方法store.subscribe(render),render
   5.事件绑定的时候在store上的dispatch方法
    <button onClick={()=>store.dispatch({type:'add'})}>点击+1</button>
  
  const render=()=>{
      ReactDOM.render(<App/>,document.getElementById('root'))
  }
  render();
  store.subscribe();

   

• react-redux

  react-redux学习，俩api俩组件，顶级组件Provider,和高阶组件connect
  不同主要是3,4
  获取，由于通过connect把state转换到props上了，this.props.count
  从react-redux解构处connect，它是一个高阶组件，也就是传入一个组件，返回一个组件；功能为提供数据和⽅法
   
  let mapStateToProps=(state)=>{//参数是state奥
      return {count:state}
  }
  let mapDispatchToProps=dispatch=>{
      return {
          add:()=>dispatch({type:'add'}),
      }
  }
  export default connect(mapStateToProps,mapDispatchToProps)(MyReactRedux);不是俩函数，可以只传一个
  
  从react-redux 解构Provider包裹根组件，顶级组件，功能为给我们提供数据
  ReactDOM.render(
      <Provider store={store}>
          <MyReactRedux/>
      </Provider>
      ,document.getElementById('root'));
  
  装饰器写法：@要装babel插件才支持
  //装饰器写法
  import {connect} from 'react-redux'
  @connect(
      state=>({count:state}),  //第一个参数mapStateToProps
      dispatch=>({            //第二个参数mapDispatchToProps
          add:()=>dispatch({type:'add'}),
          reduce:()=>dispatch({type:'reduce'})
      })
  )

   

• redux-thunk：简单的异步操作

  上面的是同步操作，异步操作要中间件
  redux中间件作用：异步操作
  redux-thunk
  在store
  首先从redux解构applyMiddleware
  创建仓库的第二个参数使用即可
  let createStore(myReducer,applyMiddleware(thunk))
  多个中间件时：最好顺序注意些
  let store=createStore(firstReducer,applyMiddleware(thunk,logger));
  

   

• redux-saga:主要负责复杂的异步操作

  //必要步骤:它是处理（集中）异步操作的中间件，特点（1）星星函数，（2）纯对象action
  //dva就是react一种数据流方案：redux+react-router+redux-saga
  

   

  //saga.js
  import {all}from 'redux-saga/effects'
  
  import loginSaga from './login/saga'
  import userListSaga from './userInfo/saga'
  export default function* rootSaga() {
      yield all([
          loginSaga(),
          userListSaga()
      ])
  }

  //index.js
  //作用，创建中间件，把数据源暴露出去,combineReducers模块化reducer
  import {createStore,applyMiddleware,combineReducers,compose} from 'redux';
  import logger from 'redux-logger'
  import createSagaMiddleware from 'redux-saga'//
  import saga from './saga'
  
  import {loginReducer} from './login/reducer'
  import {userListReducer} from './userInfo/reducer'
  
  //第一步创建中间件
  const sagaMiddleware=createSagaMiddleware();
  
  //reducer
  const rootReducer=combineReducers({
      loginReducer,
      userListReducer:userListReducer
  });
  
  //创建仓库应用中间件
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;//控制台调试
  const store=createStore(rootReducer,
      composeEnhancers(applyMiddleware(sagaMiddleware,logger))
  );
  
  //run:执行saga，把事件监听运行起来
  sagaMiddleware.run(saga);
  export default store;