React---Redux

1.插件

image.png image.png

Redux使用技巧：
reducer不能改变state的值
1.action中的方法名建议用常量文件--这样避免使用方法时写错方法名而不容易找到错误

export const INPUT_CHANGE = "inputChange";

export const DELETE_ITEM_DATA = "deleteItemData";

export const ADD_ITEM_DATA = "addItemData";

2.封装dispatch的action

import {
    INPUT_CHANGE,
    DELETE_ITEM_DATA,
    ADD_ITEM_DATA
} from "./actionTypes";

export const InputValueChange =(value)=>({
    type:INPUT_CHANGE,
    value
})

export const DeleteItemAction = (value)=>({
    type:DELETE_ITEM_DATA,
    value
})

export const AddItemAction = (value)=>({
    type:ADD_ITEM_DATA,
    value
})

  inputChange(e){
        const action = InputValueChange(e.target.value);
        store.dispatch(action)
    }
    addDatas(){
      if(this.state.inputValue === ""){
          alert("输入为空");
      }else if(this.state.datas.indexOf(this.state.inputValue) !==-1){
          alert("已存在");
      }else{
        const action = AddItemAction(this.state.inputValue);
        store.dispatch(action)
      }
    }
    deleteItem(indx){
      const action = DeleteItemAction(indx);
      store.dispatch(action)
    }

redux的中间件：redux-thunk && redux-saga

1.Redux的中间件：redux-thunk--https://github.com/reduxjs/redux-thunk

npm install redux-thunk

配置recux-thunk
import {createStore,applyMiddleware,compose} from "redux";
import ReduxThunk from 'redux-thunk';
import reducer from "./reducer";

const composeEnHancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) :compose

const enhancer = composeEnHancers(applyMiddleware(ReduxThunk))

// createStore只可以接收两个函数 所以我们使用react的compose增强函数
const store = createStore(reducer,enhancer)

export default store

redux-thunk中间件使用：
// 使用redux-thunk中间件处理axios请求
export const queryTopicsList = ()=>{
    return (dispatch)=>{
        axios.get("https://cnodejs.org/api/v1/topics").then(res=>{
            if(res && res.data.data){
              const topicslist = res.data.data;
               const action = GetTopicsList(topicslist);
               dispatch(action)
            }
         })
    }
}


  // 生命周期函数---调用接口
    componentDidMount(){
      const action = queryTopicsList();
      store.dispatch(action)
    }

2.redux-saga

npm i --save redux-saga

配置saga
import {createStore,applyMiddleware,compose} from "redux";
// import ReduxThunk from 'redux-thunk';
import reducer from "./reducer";

import creactSagaMiddleware from "redux-saga";
import mySagas from "./sagas";

const sagaMiddleware = creactSagaMiddleware();

const composeEnHancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) :compose

const enhancer = composeEnHancers(applyMiddleware(sagaMiddleware))

// createStore只可以接收两个函数 所以我们使用react的compose增强函数
const store = createStore(reducer,enhancer)
sagaMiddleware.run(mySagas);

export default store

新建sagas.js
import {
    takeEvery,
    put
} from "redux-saga/effects";

import axios from "axios";

import {
    GET_MY_LIST
} from "./actionTypes";

import {
    GetTopicsList
} from "./actionCreators";

function* mySaga() {
    yield takeEvery(GET_MY_LIST, getlist)
}

function* getlist() {
    const res = yield axios.get("https://cnodejs.org/api/v1/topics");
    const action = GetTopicsList(res.data.data);
    yield put(action);
}

export default mySaga;

   // 使用中间件
      const action = myGetTopicsAction();
      store.dispatch(action)

// redux-saga
export const myGetTopicsAction=(value)=>({
    type:GET_MY_LIST,
    value
})