redoop
Redux OOP class wrappers
Do you love how easy it is to write tests for states outside your React components but too tired of all the boilerplate in Redux? This small package might help you with that.
Table of Contents
Getting Started
npm install --save redoop
Basic Usage
import React from 'react';
import {State} from 'redoop';
import {connect} from 'react-redux';
const TodoList = ({todos, setTodos, text, setText, setState}) => (
<div>
<ul>
{todos.map(todo => <li>{todo}</li>)}
</ul>
<input
type="text"
value={text}
onChange={e => setText(e.target.value)}
/>
<button
onClick={() => {
setTodos(todos.concat(text));
setText("");
// or simply
setState({
todos: todos.concat(text),
text: ''
});
}
/>
</div>
);
const todoState = new State("todos", {
todos: [],
text: "",
});
const mapStateToProps = (state) => todoState.getState(state);
const mapDispatchToProps = todoState.getActionCreators();
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
Advance Usage
Adding to Redux Store
import {State} from 'redoop';
import {combineReducers} from 'redux';
const todoState = new State("todos");
export const makeRootReducer = (asyncReducers) => {
return combineReducers({
...asyncReducers,
[todoState.stateKey]: todoState.reduce
});
};
export const injectState = (store, state) => {
store.asyncReducers[state.stateKey] = state.reduce;
store.replaceReducer(makeRootReducer(store.asyncReducers));
};
API Reference