使用react-redux写一个简单的todolist

文件目录

• node_modules
• pusblic
  • favicon.ico
  • index.html
  • list.json
• src
  • store
    • actionCreates.js
    • actionTypes.js
    • index.js
    • reducer.js
  • index.js
  • TodoList.js
• .gitignore
• package-lock.json
• package.json
• README.md

// src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store/index';

ReactDOM.render(
    // Provider链接store，Provider里面的组件都能够获取store中的内容
    <Provider store={store}>
        <TodoList />
    </Provider>
    , document.getElementById('root')
);

// TodoList.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { changeInputValue, addItem, deleteItem } from './store/actionCreates'

// TodoList组件通过connect方法获取store中的数据
class TodoList extends Component {
    render() {
        return (
            <div>
                <div>
                    <input
                        value={this.props.inputValue}
                        onChange={this.props.changeIputValue}
                    />
                    <button
                        onClick={this.props.handleClick}
                    >提交</button>
                </div>
                <ul>
                    {
                        this.props.list.map((item, index) => {
                            return <li
                                key={index}
                                onClick={() => { this.props.handleDelete(index) }}
                            >{item}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

//连接方式
const mapStateToProps = (state) => {
    // state是store里面的数据
    return {
        inputValue: state.inputValue,
        // 把store里面的inputValue数据 映射到 props里面的inputValue的位置上
        list: state.list
    }
}

//相当于把store.dispatch方法挂载到props上，当state数据做了修改
const mapDispatchToProps = (dispatch) => {
    return {

        changeIputValue(ev) {
            const action = changeInputValue(ev.target.value)
            console.log(ev.target.value)
            dispatch(action)
        },

        handleClick() {
            const action = addItem()
            dispatch(action);
        },

        handleDelete(index) {
            const action = deleteItem(index)
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
// 让TodoList组件和store进行连接,

// store\index.js
import {createStore}from 'redux';
import reducer from './reducer'
const store = createStore(reducer)
export default store;

// reducer.js
import { CHANGE_INPUT_VALUE, ADD_ITEM, DELETE_ITEM } from './actionTypes'

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

export default (state = defaultState, action) => {
    if (action.type === CHANGE_INPUT_VALUE) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        return newState;
    }
    if (action.type === ADD_ITEM) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        // newState.inputValue = '';
        return newState;
    }
    if (action.type === DELETE_ITEM) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1)
        return newState;
    }
    return state;
}

// actionTypes.js
export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_ITEM = 'add_item';
export const DELETE_ITEM = 'delete_item';

// actionCreater.js
import { CHANGE_INPUT_VALUE, ADD_ITEM, DELETE_ITEM } from './actionTypes'

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

export const addItem = () =>({
    type: ADD_ITEM
})

export const deleteItem = (index) =>({
    type: DELETE_ITEM,
    index
})