React-usereducer NPM

React useReducer

Built in react state management using useReducer hook.

Installation

React useReducer requires React 16.8.0 or later.

npm i --save react-usereducer

Usage

Same with react-redux configuration.

Provider

React useReducer provides Component, which makes the store available to the rest of your app.

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider, createStore } from 'react-usereducer';
import reducer from './reducer';

let store = createStore(reducer);

import App from './App';

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

connect

React useReducer provides a connect method for you to subscribe your component to the root state manager.

import { connect } from 'react-usereducer';
import { addTask, removeTask } from './actionCreators';

// const Todo = ...

const mapStateToProps = state => {
  return {
    task: state.counter
  }
}

const mapDispatchToProps = { addTask, removeTask };

export default connect(mapStateToProps,mapDispatchToProps)(Todo)

createStore

React useReducer provides a createStore method for you to initialize state.

import ReactDOM from 'react-dom';

import { Provider, createStore } from 'react-usereducer';
import reducer from './reducer';

import App from './App';

const store = createStore(reducer);

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

combineReducers

React useReducer provides a combineReducer method to handle multiple reducers.

import { combineReducers, Provider, createStore } from 'react-usereducer';
import React from 'react';
import ReactDOM from 'react-dom';

import todoReducer from ‘./todoReducer’;
import booksReducer from ‘./booksReducer’;

const rootReducer = combineReducers({
  books: todoReducer,
  todo: todoReducer
});

let store = createStore(rootReducer);

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