使用react-redux实现一个todolist小案例

首先我们得对redux有一定的基础认识。

入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'

import TodoList from './TodoList'
import store from './store/index'

ReactDOM.render(

  <Provider store={store}>
    <TodoList/>
</Provider>
,
  document.getElementById('root')
);


           

1、Store核心文件（store.js）

store就是保存数据的地方，可以把它看成一个容器，整个应用只能有一个store。

Redux 提供

createStore

这个函数，用来生成 Store

代码块：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'

import reducers from './reducer'
const store = createStore(reducers,composeWithDevTools(applyMiddleware(thunk)) )

export default store
           

我把actions文件中的type抽离出来写成了一个新的文件

action-types.js

，用常量来定义type防止出错。

2、action-types文件

export const CHANGE_INPUTVALUE = 'change_input' //修改input框值
export const DELETE_ITEM = 'delete_item' //删除
export const ADD_ITEM = 'add_item' //添加
           

3、action文件 (actions.js)

state的变化就会导致页面视图view的改变。但是，用户接触不到vstate，只能接触到view。 所以state的改变必须是view导致的，action就是view发出的通知，表示state要发生变化了。

代码：

import {
    CHANGE_INPUTVALUE,
    DELETE_ITEM,
    ADD_ITEM
} from './action-types'


// export const inputChange = (e) => ({ type: CHANGE_INPUTVALUE, value: e.target.value })
//定义同步action
export const inputChange = (e) => dispatch => {
    dispatch({ type: CHANGE_INPUTVALUE, value: e.target.value})    
}
export const clickButton = () => ({ type: ADD_ITEM })
export const deleteItem = (index)=>({ type: DELETE_ITEM,index})
           

4、reducer文件

reducer是一个纯函数。它接受action和当前state作为参数，返回一个新的state。

代码：

// reducer里只能接受state，不能改变state
import {combineReducers} from 'redux'

import {
    CHANGE_INPUTVALUE,
    DELETE_ITEM,
    ADD_ITEM
} from './action-types'
const defaultState = {
    inputValue: 'write something',
    list:
    [
        '金泰亨',
        '朴智旻',
        '金南俊'
    ]
}

// 产生list状态的reducer
function list (state = defaultState, action){
    if (action.type === CHANGE_INPUTVALUE) {
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if (action.type === ADD_ITEM) {
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if (action.type ===  DELETE_ITEM) {
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
    return state
}


//向外暴露状态的结构
export default combineReducers ({
   list
})

           

5、父组件TodoList.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

import TodoListUI from './TodoListUI'
import {inputChange,clickButton,deleteItem} from './store/actions'


 class TodoList extends Component {
    changeInputValue = (e) => {
        // console.log(e.target.value);
      this.props.inputChange(e)
    }
    
    clickBtn = () => {
        this.props.clickButton()
    }

    deleteItem = (index) => {
        this.props.deleteItem(index)
    }


    render() {
        return (
            <TodoListUI
                inputValue = {this.props.list.inputValue}
                changeInputValue={this.changeInputValue}
                clickBtn={this.clickBtn}
                list={this.props.list.list}
                deleteItem = {this.deleteItem}
          />
        )
    }
}


export default connect(
    state =>({list:state.list}),
    {inputChange,clickButton,deleteItem}
)(TodoList)
           

6、UI组件TodoListUI.js

import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'

class TodoListUI extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (
            <div style={{margin:'10px'}}>
            <div >
                <Input
                    placeholder={this.props.inputValue}
                    style={{ width: '250px', marginRight: '10px' }}
                    onChange={this.props.changeInputValue}
                />
                <Button type='primary' onClick={this.props.clickBtn}>增加</Button>
            </div>

            <div style={{margin:'10px', width:'300px'}}>
                <List
                    bordered
                    dataSource={this.props.list}
                        renderItem={(item, index) => (
                            <List.Item
                                onClick={() => { this.props.deleteItem(index) }}>
                                {item}
                            </List.Item>
                        )}
                />
            </div>
        </div>
         );
    }
}
 
export default TodoListUI;
           

至此，一个完整的todolist小案例就实现了。