Quantcast
Channel: CNode:Node.js专业中文社区
Viewing all articles
Browse latest Browse all 14821

Yet another store using redux

$
0
0

Yet another store using redux. (Inspired by vuex and dva). 这仅仅是一个 store管理的库。

项目地址:https://github.com/d-band/yax

  • 基于 redux,相当于扩展了一下 redux
  • 很多代码参考于 vuex,不同的是主要用于 react
  • 思想参考了 dva,但与 dva 不同:这不是一个框架只是一个 store 管理库

简单的 Demo:

import yax from 'yax';

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

const count = {
  state: 0,
  reducers: {
    addDone (state, payload) {
      return state + payload;
    },
    minusDone (state, payload) {
      return state - payload;
    }
  },
  actions: {
    async add ({ commit }, payload) {
      await delay(1);
      commit('addDone', payload);
    },
    async minus ({ commit }, payload) {
      await delay(1);
      commit('minusDone', payload);
    }
  }
};
const store = yax({
  modules: { count }
});

store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch({
  type: 'count/add',
  payload: 2
});
store.dispatch({
  type: 'count/minus',
  payload: 1
});

结合 React 使用

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import yax from 'yax';
import count from './count';
import App from './App';

const store = yax({
  modules: { count }
});

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

结合 ReactNative 使用

import yax from 'yax';
import { AsyncStorage } from 'react-native';
import { persistStore, autoRehydrate } from 'redux-persist';

const store = yax({
  modules: { count }
}, autoRehydrate());

persistStore(store, { storage: AsyncStorage })

来写一个简单的 RN 应用

仿照 Google Authenticator 写的一个 ReactNative 应用,项目地址:https://github.com/d-band/RnTotp,附个截图:

image.png


Viewing all articles
Browse latest Browse all 14821

Trending Articles