react 渐学(四) redux,redux-thunk, redux-saga, react-redux;

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

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第1张图片

安装使用

npm install --save redux

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

src目录下创建文件夹store
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第2张图片
新建 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数据

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第3张图片

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

在组件中获取数据
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第4张图片

import Store from './store'

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

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第5张图片

渲染 展示react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第6张图片

组件中修改store中数据

输入框绑定方法react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第7张图片

  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

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第8张图片

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)

这样组件就数据就刷新了

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第9张图片

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第10张图片

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

actionCreator和actionTypes
在store文件夹下创建 actionCreator.js&actionTypes
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第11张图片

actionTypes.js

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第12张图片

actionCreator.js
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第13张图片

相应的reducer和组件也做改变

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第14张图片

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第15张图片

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

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第16张图片

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

redux中间件
react项目中的中间件一般都是redux的中间件。。。不是react本身的中间件;
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第17张图片

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

redux-thunk

安装

npm install --save redux-thunk

使用

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第18张图片

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

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第19张图片

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

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

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第20张图片
在组件中
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第21张图片
直接调取在actionCreator中定义的getdatalist方法 然后dispatch就可以了

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

redux-saga

安装

 npm install redux-sage --save

在store下创建sagas.js
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第22张图片

在store index.js下引用saga

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第23张图片

记得sagaMIddleware.run(sagas)哦

在组件中请求模拟的数据

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第24张图片

使用redux-sage
在actioncreator 新建一个方法
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第25张图片

在组件中调用

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第26张图片

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

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第27张图片

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,redux-thunk, redux-saga, react-redux;_第28张图片

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

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第29张图片
在组件中使用react-redux提供的api connect()

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

connect(fuc1: store和组件的关联, fuc2:对store数据修改的方法和dispacth关联)(组件名)

react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第30张图片
这样简单的吧这个组件转为无状态组件
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;_第31张图片

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

你可能感兴趣的:(react初学)