重新思考Redux
Rematch是没有boilerplate的Redux最佳实践。没有多余的action types,action creators,switch 语句或者thunks。

索引

  • 快速开始
  • 目的
  • 例子
  • 迁移指南
  • API参考
    • 核心API
    • 初始Redux API
    • 插件API
  • 技巧
    • Devtools
    • React
    • Vue
    • Testing
    • TypeScript
    • Immer
    • Decoupling reducers
  • 插件
    • Selectors
    • Loading
    • Persist
    • Updated
    • React Navigation
    • Immer
  • 灵感

快速开始

1
npm install @rematch/core
Copied!

第一步:Init

init 用来配置你的 reducers, devtools & store。
index.js
1
import { init } from '@rematch/core'
2
import * as models from './models'
3
4
const store = init({
5
models,
6
})
7
8
export default store
Copied!
对于更高级的设置,查看插件Redux配置选项

第二步:Models

该model促使state, reducers, async actions 和 action creators 放在同一个地方。
models.js
1
export const count = {
2
state: 0, // initial state
3
reducers: {
4
// handle state changes with pure functions
5
increment(state, payload) {
6
return state + payload
7
}
8
},
9
effects: {
10
// handle state changes with impure functions.
11
// use async/await for async actions
12
async incrementAsync(payload, rootState) {
13
await new Promise(resolve => setTimeout(resolve, 1000))
14
this.increment(payload)
15
}
16
}
17
}
Copied!
查看reducer文档以了解更多信息,包括如何从其他 modal 触发 actions。
理解模型与回答几个问题一样简单:
  1. 1.
    我的初始 state 是什么? state
  2. 2.
    我如何改变 state? reducers
  3. 3.
    我如何处理异步 action? effects with async/await

Step 3: Dispatch

dispatch 是我们如何在你的model中触发 reducers 和 effects。 Dispatch 标准化了你的action,而无需编写action types 或者 action creators。
1
import { dispatch } from '@rematch/core'
2
3
// state = { count: 0 }
4
// reducers
5
dispatch({ type: 'count/increment', payload: 1 }) // state = { count: 1 }
6
dispatch.count.increment(1) // state = { count: 2 }
7
8
// effects
9
dispatch({ type: 'count/incrementAsync', payload: 1 }) // state = { count: 3 } after delay
10
dispatch.count.incrementAsync(1) // state = { count: 4 } after delay
Copied!
Dispatch 能被直接调用,或者用 dispatch[model][action](payload)简写。

Step 4: View

1
import React from 'react'
2
import ReactDOM from 'react-dom'
3
import { Provider, connect } from 'react-redux'
4
import store from './index'
5
6
const Count = props => (
7
<div>
8
The count is {props.count}
9
<button onClick={props.increment}>increment</button>
10
<button onClick={props.incrementAsync}>incrementAsync</button>
11
</div>
12
)
13
14
const mapState = state => ({
15
count: state.count
16
})
17
18
const mapDispatch = ({ count: { increment, incrementAsync }}) => ({
19
increment: () => increment(1),
20
incrementAsync: () => incrementAsync(1)
21
})
22
23
const CountContainer = connect(mapState, mapDispatch)(Count)
24
25
ReactDOM.render(
26
<Provider store={store}>
27
<CountContainer />
28
</Provider>,
29
document.getElementById('root')
30
)
Copied!

从Redux迁移

从Redux转到Rematch只需很少的几步。
  1. 1.
    基于Redux启动Rematch init step 1
  2. 2.
    合并reducers 和 models step 2
  3. 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 3yr ago