重新思考Redux

Rematch是没有boilerplate的Redux最佳实践。没有多余的action types，action creators，switch 语句或者thunks。
 为什么我们创建Rematch​
​Video: Rematch介绍​
​Redux与Rematch的比较​
索引
快速开始
目的
例子
迁移指南
API参考
核心API
初始Redux API
插件API
技巧
Devtools
React
Vue
Testing
TypeScript
Immer
Decoupling reducers
插件
Selectors
Loading
Persist
Updated
React Navigation
Immer
 灵感
快速开始
npm install @rematch/core
第一步：Init
init 用来配置你的 reducers, devtools & store。
index.js
import { init } from '@rematch/core'
import * as models from './models'
​
const store = init({
  models,
})
​
export default store
对于更高级的设置，查看插件和Redux配置选项。
第二步：Models
该model促使state， reducers， async actions 和 action creators 放在同一个地方。
models.js
export const count = {
  state: 0, // initial state
  reducers: {
    // handle state changes with pure functions
    increment(state, payload) {
      return state + payload
    }
  },
  effects: {
    // handle state changes with impure functions.
    // use async/await for async actions
    async incrementAsync(payload, rootState) {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.increment(payload)
    }
  }
}
查看reducer文档以了解更多信息，包括如何从其他 modal 触发 actions。
理解模型与回答几个问题一样简单：
1.我的初始 state 是什么? state
2.我如何改变 state？ reducers
3.我如何处理异步 action？  effects with async/await
Step 3: Dispatch
 dispatch 是我们如何在你的model中触发 reducers 和 effects。 Dispatch 标准化了你的action，而无需编写action types 或者  action creators。
import { dispatch } from '@rematch/core'
​
                                                  // 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
 Dispatch 能被直接调用，或者用 dispatch[model][action](payload)简写。
Step 4: View
Count: JS | React | Vue | Angular​
Todos: React​
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')
)
从Redux迁移
从Redux转到Rematch只需很少的几步。
1.基于Redux启动Rematch init step 1​
2.合并reducers 和  models  step 2​
3.转移到模型 step 3​
API
 See the @rematch/core API​
Experiment with v1.0.0-alpha
使用@next标志安装rematch和所有插件。
参阅CHANGELOG以查看最新消息。
Like this project? ★ us on Github :)+
目的
Last modified 4yr ago