Redux中发送异步请求获取数据「charles模拟接口(todolist)」

1、安装并导入axios : import axios from ‘axios’;
2、在 componentDidMount() 生命周期函数 发起 axios 请求
// TodeList.js

 componentDidMount() {
      axios.get('/list.json').then((res) => {
      })
    //此处先不写 catch 后的内容
  }

3、发起ajax 请求 用charles 模拟一个 接口

4、可console json文件中的 data 看是否通过
// TodeList.js

 componentDidMount() {
      axios.get('/list.json').then((res) => {
        const data = res.data;
        console.log(data)
      })
    }

5、改store 里的数据 要把内容链接redux 中的数据 渲染到页面
（1）、创建action , 函数 initListAction 通过action 发送
actionCreatore.js

import { CHANG_INPUT_VALUE, ADD_TODO_ITEM,  DELETE_ITEM, INIT_LIST_ACTION } from './actionTypes'
export const initListAction = (data) => ({
    type:  INIT_LIST_ACTION,
    data
})

actionTypes 常量定义<br />actionTypes.js

export const INIT_LIST_ACTION = 'init_list_action';

(2) 、组件中引入 创建好的 action
// TodeList.js

import {getInputChangeAction, getAddTodoItem,  getDeleteItem, initListAction } from './store/actionCreator';

使用 // TodeList.js

 componentDidMount() {
      axios.get('/list.json').then((res) => {
        const data = res.data;
        const action = initListAction(data);
        console.log(action)
        // 把action发送给store,传递到 store, store 拿到之前的数据和当前的 action 一起给到 reducer
        store.dispatch(action)
      })
    }

 （3）reducer 做操作

import {INIT_LIST_ACTION } from './actionTypes'

const defaultState = {
    inputValue: '',
    list: []
}
export default (state = defaultState, action) => {
    if(action.type === INIT_LIST_ACTION ) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list = action.data
        return newState;
    }
}

(4)、通过监听store的变化渲染到页面，在 construtor 中 用 store.subscribe() 监听

  constructor(props) {
        store.subscribe(this.handleStoreChange);
    }

这样 模拟的 json 数据就显示在页面上啦，效果如下：

完整代码：

// store/index.js
import { createStore } from 'redux';
// 把创建好的 reducer 传递过来
import reducer from './reducer'
// 于是把笔记本当做第一个参数传递给这个store 
const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    );
export default store;

// src/TodeList.js
import React,{Component} from 'react';
// 1、引入 antd 的样式
import 'antd/dist/antd.css';
import store from './store';
import TodoListUI from './store/TodoListUI';
import {getInputChangeAction, getAddTodoItem,  getDeleteItem, initListAction } from './store/actionCreator';
import axios from 'axios';
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleStoreChange = this.handleStoreChange.bind(this);
        this.handleBtnChange = this.handleBtnChange.bind(this);
        this.handleDeleteItem = this.handleDeleteItem.bind(this);
        store.subscribe(this.handleStoreChange);
    }
    render() {
        return <TodoListUI 
          value={this.state.inputValue}
          list={this.state.list}
          handleInputChange={this.handleInputChange}
          handleBtnChange={this.handleBtnChange}
          handleDeleteItem={this.handleDeleteItem}
          />
    }
    componentDidMount() {
      axios.get('/list.json').then((res) => {
        const data = res.data;
        const action = initListAction(data);
        console.log(action)
        // 发送给reduer 请求
        store.dispatch(action)
      })
    }
    handleInputChange(e) {
      // 怎么样去链接store 中的 inputValue 呢？1、创建一个action ,也就是创建一句话。
      const action = getInputChangeAction(e.target.value)
      store.dispatch(action);
    }
    handleStoreChange() {
      // 调用store.getState 方法从 store 中重新取数据。然后调用 setState 替换掉当前的数据。这样组件的数据就和store 的数据同步了
      this.setState(store.getState())
    }
    handleBtnChange() {
      const action = getAddTodoItem();
      store.dispatch(action);
    }
    handleDeleteItem(index) {
      const action =  getDeleteItem(index)
      store.dispatch(action);
    }
}
export default TodoList;

// store/TodeListUI.js
import React,{Component} from 'react';
import { Input,Button,List} from 'antd'
const TodoListUI = (props) => {
  return (
    <div>
      <div style={{marginLeft: '10px',marginTop:'10px'}}>
          <Input 
            placeholder="请输入框" 
            style={{width:'300px', marginRight: '10px'}} 
            value={props.inputValue}
            onChange={props.handleInputChange}
          ></Input>
          <Button 
            type="primary"
            onClick={props.handleBtnChange}
          >提交</Button>
      </div>
      <List 
        style={{marginTop: '10px', width:'300px'}}
        bordered
        dataSource={props.list}
        renderItem={(item,index) => (
        <List.Item onClick={(index) => {props.handleDeleteItem(index)}}>
          {item}
        </List.Item>
        )}
      />
    </div>
  )
}
export default TodoListUI;

// store/actionCreator.js
import { CHANG_INPUT_VALUE, ADD_TODO_ITEM,  DELETE_ITEM, INIT_LIST_ACTION } from './actionTypes'
export const getInputChangeAction = (value) => ({
    type: CHANG_INPUT_VALUE,
    value
})
export const getAddTodoItem = () => ({
    type: ADD_TODO_ITEM
})
export const getDeleteItem = (index) => ({
    type:  DELETE_ITEM,
    index
})
export const initListAction = (data) => ({
    type:  INIT_LIST_ACTION,
    data
})

// store/actionTypes.js
export const CHANG_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_ITEM = 'delete_item';
export const INIT_LIST_ACTION = 'init_list_action';

// store/reducer.js
import store from "../store";
import { CHANG_INPUT_VALUE, ADD_TODO_ITEM, DELETE_ITEM, INIT_LIST_ACTION } from './actionTypes'
// 定义一个默认为空的数据
const defaultState = {
    inputValue: '',
    list: []
}
export default (state = defaultState, action) => {
    if(action.type === CHANG_INPUT_VALUE ) {
        // 改变 inputValue 的值，做一个变量深拷贝去修改
        const newState = JSON.parse(JSON.stringify(state));
        // 改成新传递过来的值
        newState.inputValue = action.value
        return newState;
    }
    if(action.type === INIT_LIST_ACTION ) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list = action.data
        return newState;
    }
    if(action.type === ADD_TODO_ITEM) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        newState.inputValue = '';
        console.log(newState);
        return newState;
    }
    if(action.type === DELETE_ITEM ) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1);
        return newState;
    }
    return state;
}