reactdux
v2.8.1
Published
Simple React/Redux.
Downloads
35
Maintainers
Readme
Reactdux
Helpful functions for React applications.
App
import { app } from 'reactdux';
import Component from './component';
const state = {
name: 'Joe',
age: 25,
friends: [
{ name: 'Pete', age: 26 },
{ name: 'Sam', age: 27 },
],
};
export default app(Component, state);
Actions
import { action } from 'reactdux';
import { fetcFriends } from './api';
export const addFriend = action((state, name, age) => ({
friends: [
...state.friends,
{ name, age },
],
}));
export const getFriends = action(async state => {
state({ loading: true });
const friends = await fetchFriends();
state({
loading: false,
friends,
});
});
Selectors
import { selector } from 'reactdux';
const selectFriend = selector((state, id) =>
state.friends.find(friend => friend.id === id));
const selectOlderFriends = selector(
state => state.age,
state => state.friends,
(age, friends) => friends
.filter(friend => friend.age >= age),
);
Containers
import { container } from 'reactdux';
import { withFriends } from './hocs';
import { selectFriends } from './selectors';
export default container(
withFriends,
{
friends: selectFriends,
},
props => ({
retired: props.age >= 65,
}),
Component,
);
Components
import React from 'react';
import { component } from 'reactdux';
import { addFriend } from './actions';
export default component({
props: {
age: 1,
friends: [],
retired: false,
},
state: {
breaths: 0,
},
mount() {
this.timer = setInterval(this.onBreathe, 1000);
},
unmount() {
clearInterval(this.timer);
},
onBreathe() {
this.setState({ breaths: this.state.breaths + 1 });
},
render() {
return (
<div>
<p>breaths: {this.state.breaths}</p>
<p>friends: {this.props.friends.length}</p>
<button onClick={this.setState('breaths', 0)}>Reset</button>
<button onClick={() => addFriend('Hank', 21)}>Befriend</button>
</div>
);
},
});
Context
import { context } from 'reactdux';
const Person = context(
{
name: 'Paul',
age: 28,
friends: [],
},
(state, setState) => ({
changeName: () => setState({ name: 'Bob' }),
getOlder: (years = 1) => setState({ age: state.age + years }),
makeFriends: async () => {
const friends = fetchFriends();
setState({ friends });
},
}),
);
export default () => (
<Person.Provider>
<div>
<Person.Consumer>
{({ name, age, getOlder }) => (
<div>
<div>{name} is {age} years old.</div>
<button onClick={getOlder}>Age</button>
</div>
)}
</Person.Consumer>
</div>
</Person.Provider>
);