@reactseed/use-redux

Live demo

Features

• Very simple to use, There is only one API.
• Based on immer, easier to manipulate state.
• Say goodbye to cumbersome action/reducer.
• Support typescript.

Installation

npm install @reactseed/use-redux immer redux react-redux
# or
yarn add @reactseed/use-redux immer redux react-redux

API

It exports all the APIs of redux and react-redux.

userRedux

const [state, callbacks] = useMethods(methods);

• state: the current state.
• callbacks: a set of callbacks corresponding to your methods.
• methods: a set of method which modify the state or return new states.

A full example:

A full example with typescript:

import React from 'react';
import ReactDOM from 'react-dom';
import useRedux, { Provider, createStore } from '@reactseed/use-redux';

const store = createStore(() => ({
  age: 20,
  name: 'reactseed',
}));

const methods = (state) => {
  const { age } = state;
  return {
    updateName: (name) => {
      state.name = name;
    },
    becomeOlder: () => {
      state.age = age + 1;
    },
  };
};

const App = () => {
  const [state, { updateName, becomeOlder }] = useRedux(methods);
  return (
    <div className="App">
      <h1>
        Hello {state.name} ({state.age})
      </h1>
      <input
        onChange={(e) => {
          updateName(e.target.value);
        }}
        value={state.name}
      />
      <br />
      <button onClick={becomeOlder}>Older</button>
    </div>
  );
};

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

Notice：Components using useRedux need to be used in Provider, like this:

import { Provider, createStore } from "@reactseed/use-redux";
const store = createStore(() => ({
 name: "reactseed"
}));
...
...
<Provider store={store}>
   <App />
</Provider>

License

@reactseed/use-redux is open source software licensed as BDS.