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.
npm install --save redoop
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({
// name for the redux state
key: "todos",
// define your initial state here
state: {
todos: [],
text: "",
}
});
const mapStateToProps = (state) => todoState.getState(state);
/* or get only the props you're interested in
const mapStateToProps = (state) => ({
// reselect getters are automatically defined
todos: todoState.getTodos(state),
text: todoState.getText(state),
});
*/
const mapDispatchToProps = todoState.getActionCreators();
/* same here, you can just get the action creators you want to use
const mapDispatchToProps = {
// a default action creator is also defined for each prop in initial state
setTodos: todoState.setTodos,
setText: todoState.setText,
// and you can even use setState just like a React.Component
// to set multiple props at once
setState: todoState.setState
};
*/
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
- todo
import {State} from 'redoop';
import {combineReducers} from 'redux';
const todoState = new State("todos");
// combine all your created states here
export const makeRootReducer = (asyncReducers) => {
return combineReducers({
...asyncReducers,
[todoState.stateKey]: todoState.reduce
});
};
// or you can use this utility for injecting state inside your routes
export const injectState = (store, state) => {
store.asyncReducers[state.stateKey] = state.reduce;
store.replaceReducer(makeRootReducer(store.asyncReducers));
};
- todo