react-context-tools v1.0.13

版本1.0.13

1. actions如果实现了componentDidMount方法，则在Provider调用componentDidMount时调用此实现

2. 同理，如果实现了componentWillUnmount方法，则在Provider调用componentWillUnmount时调用此实现

3. 调用setState之后，如果渲染时间超过了500毫秒，在process.env.NODE_ENV === "development"状态下，控制台会打印log发出警告

actions: {
        componentDidMount: function(){
            console.log("did mount")//在Provider渲染结束调用componentDidMount时，会在控制台打印出did mount
        },
        ....
}

版本1.0.12 新增delegate(Component, ...wrappers)函数

//可以合并多个Consumer，将合并之后的props传给Component，后面的props.customeKey会覆盖前面的props.customKey
const DemoConsumer = delegate(Demo, Demo1Consumer((state)=>{
    const {query, data} = state;
    return {
        query,
        data,
        customKey: 2//会被覆盖
    }
}), Demo2Consumer((state)=>{
    const {query2} = state;
    return {
        query2,
        customKey: 3//不会被覆盖
    }
}, (actions)=>{
    return {}
}));

版本1.0.11 新增getStateNow()函数

export const {Consumer, getStateNow} = initStore({
    initialState: {a: 1},
    actions: {}
})

console.log(getStateNow());//print {a: 1}

版本1.0.4新增getState()函数

initStore({
    initialState: {},
    actions: {
       doSomething: function(){
           this.getState()//利用Promise实现
                 .then(state=>{//得到最新的state
           
                 })     
       }
    }
})

版本1.0.3接口变动

initStore(..)返回的Consumer使用方法有所变动，由原先的Consumer(Component)变为Consumer()(Comonent), 使用方法如下，你可以根据你的组件所需的props进行映射

//示例一
const DemoConsumer = Consumer()(Demo);

//示例二
const mapStateToProps = (state)=>{
    const {query} = state;
    return query
};
const DemoConsumer = Consumer(mapStateToProps)(Demo);

//示例三
const mapStateToProps = (state)=>{
    const {query} = state;
    return query
};
const mapActionsToProps = (actions)=>{
    return actions;
};
const DemoConsumer = Consumer(mapStateToProps, mapActionsToProps)(Demo);

Guide

React版本需要>=16.4，基于React Context API封装的工具

npm install --save react-context-tools

export const {Consumer} = initStore({
    initialState: {
        query: {}
    },//此处初始化state，会成为Provider的state
    actions: {
        yourFunctionName1: function(){},//只能使用此种方式定义，不能使用箭头函数，因为需要调用bind(this)方法
        yourFunctionName2: function(param){}
    }//在此处定义function
})
//actions下自定义的函数中，this被bind到Provider中了，可以使用的函数如下
this.setState((state)=>{//React原生的方法
    return yourNewState;
})

this.setState(yourNewState);//React原生的方法

this.getState()//利用Promise实现
.then(state=>{//得到最新的state

})

Example

1.配置你的store

import {initStore} from 'react-context-tools';

export const {Consumer} = initStore({
    initialState: {
        query: {
            start: "2018.06.30",
            end: "2018.07.06"
        },
        data: {}
    },
    actions: {
        getData: function(){//不能使用箭头函数，必须使用function(){/*your code*/}
            return this.getState()//得到最新的state,因为state的更新机制类似一个队列，并不是立即执行的
                .then(state=>{
                    console.log(state);
                    return fetch("/")
                        .then(response=>response.text())
                        .then(text=>{
                            this.setState({
                                data: {}
                            });
                            return text;
                        })
                });
        },
        alterQuery: function (start, end) {
            const query = {
                start,
                end
            }
            this.setState({
                query
            })
        }
    }
})

2.使用store

import {Providers} from 'react-context-tools';

class Demo extends Component {
  componentDidMount(){
      const {getData} = this.props;
      getData()
          .then(json=>{
              console.log(json)
          })
  }
  render() {
    const {start, end, alterQuery} = this.props;

    return <div>
      <h1>start: {start}, end: {end}</h1>
      <button onClick={()=>{
          alterQuery("2018.05.30", "2018.06.06")
      }}>click me to change text</button>
    </div>
  }
}
const mapStateToProps = (state)=>{
    const {query} = state;
    return query
};
// const mapActionsToProps = (actions)=>{
//     return actions;
// };
// const DemoConsumer = Consumer(mapStateToProps, mapActionsToProps)(Demo);
//const DemoConsumer = Consumer()(Demo);
const DemoConsumer = Consumer(mapStateToProps)(Demo);
render(
    <Providers>
        <DemoConsumer/>
    </Providers>,
    document.querySelector('#demo')
);