1 Star 0 Fork 0

3crazy/rematch

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Rematch

Build Status Coverage Status Codacy Badge npm version file size file size

Rethink Redux.

Rematch is Redux best practices without the boilerplate. No more action types, action creators, switch statements or thunks. See a comparison.

Installation

npm install @rematch/core

Getting Started

Step 1: Init

init configures your reducers, devtools & store.

index.js

import { init } from '@rematch/core'
import * as models from './models'

const store = init({
  models,
  plugins: [],
})

For additional setup, pass in a configuration or one of many existing plugins.

Step 2: Models

The model brings together state, reducers, async actions & action creators in one place.

models.js

export const count = {
  state: 0, // initial state
  reducers: { // state changes with pure functions
    addBy: (state, payload) => state + payload,    
  },
  effects: { // state changes with impure functions
    async addByAsync(payload, state) {
      await Promise.resolve()
      this.addBy(payload)
    }
  }
}

Understanding models is as simple as answering a few questions:

  1. What is my initial state? state
  2. How do I change the state? reducers
  3. How do I handle asynchronous actions? effects with async/await

Step 3: Dispatch

dispatch is how we trigger reducers & effects in your models. Dispatch standardizes your actions without the need for action types, action creators, or mapDispatchToProps.

import { dispatch } from '@rematch/core'
                                              // state = { count: 0 }
// reducers
dispatch({ type: 'count/addBy', payload: 1 }) // state = { count: 1 }
dispatch.count.addBy(1)                       // state = { count: 2 }

// effects
dispatch({ type: 'count/addByAsync', payload: 1 }) // state = { count: 3 } after delay
dispatch.count.addByAsync(1)                  // state = { count: 4 } after delay

Dispatch can be called directly, or with the dispatch.model.action(payload) shorthand.

Example

React | Vue | AngularJS | Angular 2

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider, connect } from 'react-redux'
import { init, dispatch } from '@rematch/core'
import * as models from './models'

const store = init({
  models,
})

const Count = props => (
  <div>
    <h1>The count is: {props.count}</h1>
    <button onClick={props.addByOne}>Add 1</button>
    <button onClick={props.addByOneAsync}>Add 1 Async</button>
  </div>
)

const CountContainer = connect(state => ({
  count: state.count,
  addByOne: () => dispatch.count.addBy(1),
  addByOneAsync: () => dispatch.count.addByAsync(1)
}))(Count)

ReactDOM.render(
  <Provider store={store}>
    <CountContainer />
  </Provider>,
  document.getElementById('root')
)

API

See the API Reference.

空文件

简介

A Redux Framework 展开 收起
JavaScript 等 4 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/crazy3/rematch.git
git@gitee.com:crazy3/rematch.git
crazy3
rematch
rematch
0.1.3

搜索帮助