React结合Redux实现Todolist

• redux工作流程

• store.js

建立redux状态仓库

代码语言：javascript复制

import { createStore, combineReducers } from 'redux';
import {add, deleter} from './Reducers/TodoList';

/**
 * 第一个参数是reducers  第二个参数是默认状态
 * 所以还得建立reducers  reducers主要是负责将新的状态返回到store里面  store负责更新
 */

export default createStore(combineReducers({
    add,
    deleter
}));

• todolist.js    todolist的reducer

注意  reducers不要直接返回修改的state 需要返回的一个新的对象 否则内存地址指向的都是同一处

代码语言：javascript复制

const states = {
    list: [
        {id: 1, name: '张三', age: 18},
        {id: 2, name: '王五', age: 19},
        {id: 3, name: '李四', age: 20},
    ],
    test: 1

};


export const add = (state = states, action) => {

    const {list} = state;

    switch (action.type) {
        case 'addTodoList':
            list.push(action.payload);

            return {
                ...state,
                list
            };

        case 'deleteTodoList':
            return {
                ...state,
                list: list.filter((item, index) => {
                    return index !== action.payload
                })
            };
    }

    // 返回新的状态
    return state;
};



const statesB = {
    name: '张三'
};

export const deleter = (state = statesB, action) => {
    console.log('deleter reducers')
    switch (action.type) {
        case 'change':
            return {
                ...state,
                name: action.payload
            };
    }

    // 返回新的状态
    return state;
};

• Todolist.js 组件实现

代码语言：javascript复制

import React from 'react';
import store from '../store';

/**
 * 如果单独使用redux的话 直接安装redux的包 进行简单状态管理
 * 使用store提供subscribe订阅状态更新 状态更新后使用更新组件
 */

class TodoList extends React.Component {

    constructor(props){
        super(props);
        this.state = store.getState();
        store.subscribe(this.changeState);
    }

    changeState = () => {
        console.log(11)
        this.setState(store.getState())
    };

    deleter = (index) => {
        store.dispatch({
            type: 'deleteTodoList',
            payload: index
        })
    };

    add = () => {
        store.dispatch({
            type: 'addTodoList',
            payload: {
                id: 4,
                name: '赵六',
                age: 1
            }
        })

    };

    change = (e) => {
        store.dispatch({
            type: 'change',
            payload: '王五'
        })
    };

    render() {

        const {
            list
        } = this.state.add;

        const {
            name
        } = this.state.deleter;

        console.log(this.state)

        return (
            <div>
                <h1>{name}</h1>
                <button onClick={this.add}>增加</button>
                <button onClick={this.change}>change</button>
                {
                    list.map((item, index) => {
                        return <div key={item.id} style={{display: 'flex', justifyContent: "center"}}>
                            <div>{item.name}</div>
                            <div>{item.age}</div>
                            <button onClick={this.deleter.bind(this, index)}>删除</button>
                        </div>
                    })
                }
            </div>
        );
    }
}



export default TodoList

实现效果：

使用了redux进行状态管理 删除一个用户首先dispatch了一个deleteTodoList的 action  然后在reducer中返回删除后的数据 store更新数据 组件订阅了store的更新后 更新了内部状态 页面更新成功

代码解析:

• 创建Store

代码语言：javascript复制

createStore(Reducers)    利用Reducers创建一个Store  第二个参数是默认的初始化参数 利

合并多个Reducers。 会将所有reducers执行一遍获取初始状态 如果没有可以利用createStore 第二个参数设置默认参数

只要是dispatch的action 就会触发所有的reducers
const todoApp = combineReducers({
    // visibilityFilter,
    name1:todos,
})

用getState() 获取的键是导出时候的对应值 即name1 需要注意

• 执行Action

代码语言：javascript复制

利用创建好的store
Store.dispatch({
  type: '',							// 即会将这个类型传入reducers的第二个参数 action type为必传
  value: ''						  // 参数随意 一般作用于参数传递
})

• Reducers处理

代码语言：javascript复制

reducers作为纯函数
function r (prevState, action) {
   // 第一个参数是上一次的状态。action是dispatch过来的值
   
   // 返回新的状态给store进行更新
   return {
     ... newState
   }
}

注意： action和reducer之间并不存在一对一的关系。一个action是可以被多个模块的reducer处理的，尤其是当模块之间存在关联关系时，这种场景更为常见

本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。

redux javascript mapreduce

0 人点赞