redux

action

要发生什么 一个对象

add = {
    
    type: 'add',
    
    text: 'add a value',
}

function add(text){
    
    return {

        type: 'add',
    
        text,
    }
}

function deleteItem(index){
    
    return {

        type: 'delete',
    
        index,
    }
}

reduce

状态变更 一个函数

export function todolist(state=[], action){
    
    switch(action.type){
        
        case 'add':
            
            return [...state, action.text];
            
        case 'delete':

            let arr = [...state];
        
            arr.splice(action.index, 1); 

             return arr;
            
        default:
        
            return state;
    }
}

store

将action和store结合在一起

getState()获取state
dispatch(actions)更新state
subscribe(listener)注册监听器
subscribe(listener)返回函数注销监听器

import {createStroe} from 'redux';

import reducer from './reducers';

let store = createStore(reducer)

实现利用reudx实现todo数据管理
demo: https://github.com/hug-love/redux-demo.git

Redux 中文文档：https://www.redux.org.cn/