Rematch实践指南
  • 重新思考Redux
  • 目的
  • API 文档
    • @rematch/core API
    • Init Redux API
    • Plugin API
  • 技巧
    • Devtools
    • React
    • Vue
    • Testing
    • TypeScript
    • Immer
    • Decoupling reducers
  • 插件
    • Rematch Select
    • Rematch Loading
    • Rematch Persist
    • Rematch Updated
    • React Navigation
    • Rematch Immer
  • 灵感
Powered by GitBook
On this page
  • 索引
  • 快速开始
  • 从Redux迁移
  • API
  • Experiment with v1.0.0-alpha

重新思考Redux

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

Next目的

Last updated 6 years ago

索引

  • 快速开始

  • 目的

  • 例子

  • 迁移指南

  • 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

第二步: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)
    }
  }
}

理解模型与回答几个问题一样简单:

  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

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只需很少的几步。

API

Experiment with v1.0.0-alpha

使用@next标志安装rematch和所有插件。

Like this project? ★ us on Github :)+

对于更高级的设置,查看和。

查看以了解更多信息,包括如何从其他 modal 触发 actions。

Count: | | |

Todos

基于Redux启动Rematch init

合并reducers 和 models

转移到模型

See the

参阅以查看最新消息。

为什么我们创建Rematch
Video: Rematch介绍
Redux与Rematch的比较
插件
Redux配置选项
reducer文档
JS
React
Vue
Angular
: React
step 1
step 2
step 3
@rematch/core API
CHANGELOG