Redux => Redux-Thunk

npm i axios

https://github.com/reduxjs/redux-thunk

npm install redux-thunk

store
——index.js

// 配置 redux-thunk
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

TodoList.js

import React from 'react'
import TodoItem from './TodoItem'
import store from './store'
import { 
  getInputChangeAction,
  getTodoAddAction,
  getTodoDeleteAction,
  getTodoList
 } from './store/actionCreators'

class TodoList extends React.Component {
  constructor() {
    super()
    this.state = store.getState()
    this.handleDelete = this.handleDelete.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleStoreChange = this.handleStoreChange.bind(this)
    store.subscribe(this.handleStoreChange)
  }

  componentDidMount() {
    const action = getTodoList()
    store.dispatch(action)
  }

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

  handleBtnClick() {
    const action = getTodoAddAction()
    store.dispatch(action)
  }

  handleInputChange(e) {
    const action = getInputChangeAction(e.target.value)
    store.dispatch(action)
  }

  handleDelete(index) {
    const action = getTodoDeleteAction(index)
    store.dispatch(action)
  }

  getTodoItems() {

    const { list } = this.state

    return (
      list.map((item, index) => {
        return (
          <TodoItem 
            key={index} 
            index={index} 
            content={item}
            delete={this.handleDelete}
          />
        )
      })
    )
  }

  render() {

    const { inputValue } = this.state

    return (
      <div>
        <div>
          <input value={inputValue} onChange={this.handleInputChange}/>
          <button onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>{this.getTodoItems()}</ul>
      </div>
    )
  }
}

export default TodoList

actionCreators.js

import * as constans from './constants'
import axios from 'axios';

export const getInputChangeAction = (value) => ({
  type: constans.CHANGE_INPUT_VALUE,
  value
})

export const getTodoAddAction = () => ({
  type: constans.ADD_TODO_ITEM
})

export const getTodoDeleteAction = (value) => ({
  type: constans.DELETE_TODO_ITEM,
  value
})

export const initListAction = (value) => ({
  type: constans.INIT_LIST_DATA,
  value
})

export const getTodoList = () => {
  return (dispatch) => {
    axios.get('/api/list.json').then((res) => {
      const result = res.data.data
      const action = initListAction(result.list)
      dispatch(action)
    })
  }
}

store
——reducer.js

import * as constants from './constants'

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

export default (state = defaultState, action) => {
  if (action.type === constants.CHANGE_INPUT_VALUE) {
    const newState = JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
  }
  if (action.type === constants.ADD_TODO_ITEM) {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState;
  }
  if (action.type === constants.DELETE_TODO_ITEM) {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.splice(action.value, 1);
    return newState
  }
  if (action.type === constants.INIT_LIST_DATA) {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list = action.value
    return newState
  }
  return state
}