redux 的使用

目录结构：

首先安装：redux 和 redux-thunk

npm install --save redux

npm install --save redux-thunk

在store下的index.js中引入并使用

import { createStore, applyMiddleware, compose } from "redux";
import reducer from "./reducer";
import thunk from "redux-thunk";

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

const enhancer = composeEnhancers(applyMiddleware(thunk));

const store = createStore(reducer, enhancer);

export default store;

在actionTypes.js中建立存储值的常量以便使用

// input 值
export const INP_VAL = 'inpVal'

// 获取列表数据
export const GET_LIST = "getList"

在reducer.js中引入actionTypes.js中定义的常量

import { INP_VAL, GET_LIST } from "./actionTypes";

// 设置默认值
const defaultState = {
  inpVal: "提示",
  list: []
};

export default (state = defaultState, action) => {

  if (action.type === INP_VAL) {
    let newState = JSON.parse(JSON.stringify(state));
    newState.inpVal = action.value;

    return newState;
  }


  if (action.type === GET_LIST) {
    let newState = JSON.parse(JSON.stringify(state));
    newState.list = action.data.list;

    return newState;
  }

  return state;
};

在actionCreators.js中

import { INP_VAL, GET_LIST } from "./actionTypes";
import axios from "axios";

export const iptAction = value => ({
  type: INP_VAL,
  value
});


export const getActionList = data => ({
  type: GET_LIST,
  data
});

export const getTodoList = () => {
  return dispatch => {
    axios
      .get(
        "https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList"
      )
      .then(res => {
        const data = res.data.data;
        const action = getActionList(data);
        dispatch(action);
      })
      .catch(err => {
        console.log(err);
      });
  };
};

在TodoList.js页面中使用

import React, { Component } from "react";
import store from "./store/index";
import {
  iptAction,
  getTodoList
} from "./store/actionCreators";
import TodoListUI from "./TodoListUI";

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    // TODO: 监听store中值的改变
    this.storeChange = this.storeChange.bind(this);
    store.subscribe(this.storeChange);
    
    // 为事件绑定this
    this.changeVal = this.changeVal.bind(this);
  }

  componentDidMount() {
    // 获取接口数据并给页面赋值
    const action = getTodoList();
    store.dispatch(action);
  }

  render() {
    return (
      <TodoListUI
        inpVal={this.state.inpVal}
        changeVal={this.changeVal}
        addItem={this.addItem}
        list={this.state.list}
        delItem={this.delItem}
      />
    );
  }

  changeVal(e) {
    store.dispatch(iptAction(e.target.value));
  }

  // TODO: 改变store中的值
  storeChange() {
    this.setState(store.getState());
  }
}

export default TodoList;

项目示例代码地址：https://github.com/Aubrey-forget/redux-demo