react 渐学（四） redux，redux-thunk, redux-saga, react-redux;

单纯的react只是一个视图层框架，写项目是还需要数据管理工具redux；

安装使用

npm install --save redux

英文好的看githup https://github.com/reduxjs/redux；

src目录下创建文件夹store

新建 index.js 和 reducer.js

index.js

import { createStore } from 'redux'; 
import reducer from './reducer'

const store = createStore(reducer);

export default store;

createStore 创建Store的api

reducer.js

const defaultState = {
    inputValue: '123',
    list: []
}

export default (state = defaultState) => {
    return state;
}

初始的store 中state的初始值

reducer是一个纯函数（给定固定的输入值，就会有一定的输出，且无任何副作用）；
reducer的作用就是返回给 store 一个信息 让store修改数据

在组件中获得store数据

在reduce中初始值
const defaultState = {
inputValue: '123',
list: [1, 2, 3]
}

在组件中获取数据

import Store from './store'

使用store提供的getState()方法获取数据

渲染 展示

组件中修改store中数据

输入框绑定方法

  handleInputChange(e) {
    const val = e.target.value;
    const action = {
      type: 'change_input_value',
      value: val
    }
    Store.dispatch(action)
  }

创建 action
通过store提供的dispatch()方法，将组件定义action反应给Store，Store查询reducer

reducer接收action 根据action.type做出反应
因为Sotre是唯一的，且只有store自己可以改变自己的内容 所以在 reducer里对state做了一次copy

const newstate = JSON.parse(JSON.stringify(state));

可以看到store数据已经改变了 但是组件的数据没有刷新
store提供了subscribe()来刷新组件数据

定义方法

 handleStoreChange() {
        this.setState(Store.getState())
    }

在constructor中添加

Store.subscribe(this.handleStoreChange)

这样组件就数据就刷新了

至此store常用的4个方法就全部使用了
createStore()： 创建store
getState()：组件获取store中的数据
dispatch()：组件传递信息给store（store在传递给reducer，reducer返回信息给store；store做出改变）
subscribe()：组件根据store更新数据

actionCreator和actionTypes
在store文件夹下创建 actionCreator.js&actionTypes

actionTypes.js

actionCreator.js

相应的reducer和组件也做改变

这样写的好处是便于管理，出错了也会log出来。。。

再说说着这
组件要更新数据 调用actionCreater方法 dispatch给store， store 传给reducer ，reducer做出反应， store改变，通过subscribe给组件数据

redux中间件
react项目中的中间件一般都是redux的中间件。。。不是react本身的中间件；

这里中间件都是action与reducer之间的

redux-thunk

安装

npm install --save redux-thunk

使用

因为还要兼容redux在chrome的插件 所以麻烦点

这是不使用中间件请求模拟数据
用Charles 模拟的

使用thunk
直接在actionCreator中进行数据请求

在组件中

直接调取在actionCreator中定义的getdatalist方法 然后dispatch就可以了

redux-thunk简单的解释就是让actioncreator的方法中不仅仅可以返回一个对象 还可以是一个函数，如果是对象的话会直接丢给store在到reducer中做处理，如果是函数的话就会先执行函数再丢给store到reducer中做处理；

redux-saga

安装

 npm install redux-sage --save

在store下创建sagas.js

在store index.js下引用saga

记得sagaMIddleware.run（sagas）哦

在组件中请求模拟的数据

使用redux-sage
在actioncreator 新建一个方法

在组件中调用

这里不仅仅是reducer可以接受到这个dispatch这个action， 在saga也可以

在

function* mySaga() {
    yield takeEvery(GET_INIT_DATA_INIT, getInitdata);
}

调用saga中 takeEvery（）方法。 接收2个参数第一个是ation.type 另一个是接收到后调用generator函数名

通过

 const res = yield axios.get('/api/todolist')
 const action = initData(res.data)

得到请求数据 新建action
调用saga中 put函数将这个action 发给stroe给reducer做处理

redux-saga 简单的来说拦截组件dispatch出的action 判断action的type的来做出新的反应生成新的 action 返回给store

saga用的都是generator函数 比较不适应。。。提供的api也很多。。。
适合大项目使用。。。。。。。。小项目安心使用redux-thunk吧 简单。。。

react-redux

安装

npm install react-redux --save

使用

在项目的index.js 引用

使用react-redux 中Provider组件 包住使用store的组件 再把store 引入并使用
provider 就是链接store的一个提供器 让其内部的组件都可以获取store

在组件中使用react-redux提供的api connect（）

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

connect（fuc1: store和组件的关联， fuc2：对store数据修改的方法和dispacth关联）（组件名）

这样简单的吧这个组件转为无状态组件

搞定 react的一般基础就到这了 实战吧干巴爹