sudux

基于react新提供的context api，实现的一套类似redux的状态管理工具。简洁灵活易扩展，依赖少，源码不足百行

Install

npm install sudux -S

Quick Start

首先，我们定义一个action, 路径context/actions/todo.js(来自example/todo)

export const finishOrCancel = (dispatch, getState) => async ({id,isComplete}) => {
	await dispatch({
		type:'FINISH_OR_CANCEL',
		payload: {id,isComplete}
	});
};

export const switchFilterType = (dispatch, getState) => async (type) => {
	await dispatch({
		type:'SWITCH_FILTER_TYPE',
		payload: type
	});
};

这里统一运用asysnc function,以便优雅的处理异步流程

接着，我们定义一个reducer, 路径context/reducers/todo.js(来自example/todo)

export const initState = {
	todoList:[
		{desc:'init todo',isComplete:true,id:1}
	],
	filterType:'all'
};

export const reduce = (state = initState, action) => {
	let {type, payload} =action;
	if(type === 'ADD_TODO') {
		let { todoList } =state,len=todoList.length;
		let id = len>0 ? todoList[len-1].id : 0;
		let todo = {desc:payload,isComplete:false,id:id+1};
		state.todoList.push(todo);
	}else if(type === 'REMOVE_TODO'){
		let { todoList } =state,len=todoList.length;
		for(let i=0;i<len;i++){
			let {id} = todoList[i];
			if(id === payload){
				state.todoList.splice(i,1);
				break;
			}
		}
	}else if(type === 'FINISH_OR_CANCEL'){
		let { todoList } =state,len=todoList.length;
		for(let i=0;i<len;i++){
			let {id} = todoList[i];
			if(id === payload.id){
				state.todoList[i].isComplete=payload.isComplete;
				break;
			}
		}
	}else if(type==="SWITCH_FILTER_TYPE"){
		state.filterType = payload;
	}
};

内部的状态变更是基于immer实现的，这里的state就是immer中可修改的副本，直接修改后就会返回变更后的状态。如果手动return state;反而会报错。

最后，我们定义一个context, 路径context/todo.js(来自example/todo)

import React from "react";
import {createProvider, map} from 'sudux';

import * as reducer from "./reducers/todo";
import * as actions from "./actions/todo";

export const todoCtx = React.createContext(null);
//这是属于todoCtx的Provider
export const TodoProvider = createProvider(reducer,actions,todoCtx);

//这是绑定todoCtx的映射函数，方便消费TodoProvider
export function mapTodo(mapState) {
	return map(todoCtx, mapState);
}

基本概念

这是一个类似redux状态管理库，形式上和redux很相似。而内部实现上，则充分利用react16.3以来提供的新context api，以更符合直觉的方式予以实现，并与该新的context api在思想上高度切合，都是基于供需关系的基本思想。本库总共只有三个api,分别是createProvider、map和multiMap。 其中createProvider，专门用来创建各种上下文(contxet)的Provider，从上例可见一斑； 而map则专门来消费指定上下文(contxet)的Provider，也就是将其中的状态映射到组件的属性； 最后，有时一个组件可能会需要多个Provider中的store，于是就轮到multiMap上场了。总而言之，通过该库可以让这种供需式的状态管理变得更加方便灵活，且可控性高。

map使用示例

@map(todoCtx,['switchFilterType','filterType'])
//等效于 @mapTodo(['switchFilterType','filterType'])
class MyComponnet extends React.Component{
    render(){
        cosnt {switchFilterType,filterType} = this.props;
    }
}

multiMap使用示例

@multiMap([
	{context: todoCtx,mapState:['switchFilterType','filterType']},
	{context: otherCtx,mapState:['your state name']}
])
class MyComponnet extends React.Component{
    render(){
        cosnt {switchFilterType,filterType} = this.props;
    }
}