重新思考Redux

Rematch实践指南
Search…
重新思考Redux
目的
重新思考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
 灵感
快速开始
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
Count: JS | React | Vue | Angular​
Todos: React​
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
Copy link
Contents
Experiment with v1.0.0-alpha