Redux的todoList案例

• store/index.js ```jsx import { createStore, applyMiddleware } from ‘redux’; import reducer from ‘./reducer’; import thunk from ‘redux-thunk’;

//创建一个公共存储仓库 const store = createStore( reducer, //初始化数据 applyMiddleware(thunk)//使用redux中间件 ),

export default store;

- store/reducer.js
```jsx
import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_ITEM, INIT_LIST_ACTION } from './actionTypes';
const defaultState = {
    inputValue: '',
    list: []
}
//默认数据
export default (state = defaultState, action) => {
    //state是整个仓库存储的数据，action是store传递来的一个对象
    if (action.type === CHANGE_INPUT_VALUE) {
        return [...state, inputValue:action.value]
    }
    if (action.type === CHANGE_LIST_VALUE) {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if (action.type === DELETE_LIST_ITEM) {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
      if (action.type === INIT_LIST_ACTION) {
        return action.data
    }
    return state
}
//reducer可以接受state，但是绝对不能改变state
//reducer.js返回一个数据和方法

• store/actionTypes.js

  export const CHANGE_INPUT_VALUE = 'change_input_value';
  export const CHANGE_LIST_VALUE = 'change_list_value';
  export const DELETE_LIST_ITEM = 'delete_list_item'
  export const INIT_LIST_ACTION = 'init_list_action'

• store/actionCreators.js ```jsx import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_ITEM, INIT_LIST_ACTION} from ‘./actionTypes’; import axios from ‘axios’

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

export const getButClickAction = ()=>({ type:CHANGE_LIST_VALUE, })

export const getDeleteItem = (index) =>({ type:DELETE_LIST_ITEM, index })

export const initListAction = (data) =>({ type:INIT_LIST_ACTION, data }) export const getTodoList = () =>({ return (dispatch)=>{ axios.get(‘/list.json’).then(res=>{ const data = res.data; const action = initListAction(data) dispatch(action) }) } })

- ToDoList.js（用于做页面逻辑的处理）
```jsx
import React, { Component } from 'react';
import { getInputChangeAction, getButClickAction, getDeleteItem, getTodoList } from './store/actionCreators';
import ToDoListUI from './ToDoListUI';
import 'antd/dist/antd.css';
import store from './store'
class ToDoList extends Component {
    constructor(props) {
        super(props)
        this.state = store.getState()
        //.getState()是获取stroe值的一个方法
        this.inputChange = this.inputChange.bind(this)
        this.storeChange = this.storeChange.bind(this)
        this.butClick = this.butClick.bind(this)
        store.subscribe(this.storeChange)
        //订阅store的改变，只要store一改变，就执行StoreChange这个方法
    }
      componentDidMount(){
      const action = getTodoList()
      //使用了redux-thunk之后就可以dispatch一个函数给store了，该函数会立即自动执行并会接收一个dispatch方法
      store.dispatch(action) 
    }
    inputChange = (e) => {
        //与store通信通过action
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action)
        //把action传递给store
    }
    storeChange = () => {
        this.setState(store.getState())
        //把新的store.getState()数据赋值给state
    }
    butClick = () => {
        const action = getButClickAction()
        store.dispatch(action)
    }
    deleteItem = (index) => {
        const action = getDeleteItem(index)
        store.dispatch(action)
    }
    render() {
        return (
            <ToDoListUI
                inputValue={this.state.inputValue}
                list={this.state.list}
                inputChange={this.inputChange}
                butClick={this.butClick}
                deleteItem={this.deleteItem}
            />
        )
    }
}
export default ToDoList;

• ToDoListUI.js （只用做页面渲染，不做任何逻辑处理） ```jsx import React, { Component } from ‘react’; import { Input, Button, List } from ‘antd’;

class ToDoListUI extends Component { render() { return (

            ></Input>
            <Button type="primary" onClick={this.props.butClick}>提交</Button>
            <List
                style={{ width: '300px', marginTop: '10px' }}
                bordered
                dataSource={this.props.list}
                renderItem={(item, index) => (
                    <List.Item onClick={() => this.props.deleteItem(index)}>
                        {item}
                    </List.Item>
                )}
            />
        </div>
    )
}