重新思考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.
    我的初始 state 是什么? state
    2.
    我如何改变 state? reducers
    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.
    基于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 3yr ago