rematch的基本用法

rematch是对redux的二次封装，简化了redux是使用，极大的提高了开发体验。rematch仅仅是对redux的封装，没有依赖redux-saga，也没有关联react，因此其可以用在其他的视图库中，如vue等。

1. rematch的优点

1.省略了action types

不必再多次写字符串，使用model/method代替

2.省略了action creators

直接调用方法，不必再生产action type，使用dispatch.model.method代替

3.省略了switch语句

调用model.method方法，不必判断action type

4.集中书写状态，同步和异步方法

在一个model中使用state，reducers和effects来写状态，同步和异步方法

2. rematch的model

model中直接写state，reducers，effects，十分集中方便

export const count = {

  state: 0, // initial state

  reducers: {

    // handle state changes with pure functions

    increment(state, payload) {

      return state + payload

    }

  },

  effects: (dispatch) => ({

    // handle state changes with impure functions.

    // use async/await for async actions

    async incrementAsync(payload, rootState) {

      await new Promise(resolve => setTimeout(resolve, 1000))

      dispatch.count.increment(payload)

    }

  })

}

3. rematch的dispatch

dispatch可以直接调用同步和异步方法，不必再发送action

import { init } from '@rematch/core'

import * as models from './models'

const store = init({

  models,

})

export const { dispatch } = store

                                                  // state = { count: 0 }

// reducers

dispatch({ type: 'count/increment', payload: 1 }) // state = { count: 1 }

dispatch.count.increment(1)                       // state = { count: 2 }

// effects

dispatch({ type: 'count/incrementAsync', payload: 1 }) // state = { count: 3 } after delay

dispatch.count.incrementAsync(1)                       // state = { count: 4 } after delay

4. rematch的状态派发

依然使用redux的connect，mapStateToProps，mapStateToDispatch来派发状态和方法到子组件

import React from 'react'

import ReactDOM from 'react-dom'

import { Provider, connect } from 'react-redux'

import store from './index'

const Count = props => (

  <div>

    The count is {props.count}

    <button onClick={props.increment}>increment</button>

    <button onClick={props.incrementAsync}>incrementAsync</button>

  </div>

)

const mapState = state => ({

  count: state.count

})

const mapDispatch = ({ count: { increment, incrementAsync }}) => ({

  increment: () => increment(1),

  incrementAsync: () => incrementAsync(1)

})

const CountContainer = connect(mapState, mapDispatch)(Count)

ReactDOM.render(

  <Provider store={store}>

    <CountContainer />

  </Provider>,

  document.getElementById('root')

)