react-context-store

What is it?

React Context Store is a simple, context-based store for React applications. It uses the Context API to implement functionality similar to what Redux or other stores might offer.

I gradually wrote this code between May and September of 2020 while working on a React app. Because the app's state was small, I had state live in the components that used it. Later I decided to centralize the state management and ensure that components update when state changes. The question is, how should I do that? My first thought was to use Redux. However, I don't really care about the opinions and optimizations that Redux + Reselect provides because my state object is pretty simple. Also the actions/ and reducers/ directories tend to get pretty big, and I don't want to have to maintain them if I don't have to. So my second thought was that Context should be able to do what I need. Long story short, it does. If you have a simple React app that has enough state to justify a store but not enough state to include a library like Redux, you should give this a try. It's simple. It would be a breeze to optimize if you needed.

Usage

Initialize

entry.jsx

import Store from './store';
ReactDOM.hydrate(
<Store store={store}>
<YourApp />
</Store>,
document.getElementById('root')
);

context.js

import { createContext } from 'react';
const context = createContext();
export default context;

store.jsx

import StoreContext from './context'
import { fetchUsers } from './api';
import { selectUsers } from './selectors';
export default class Store extends Component {
constructor(props) {
super(props);
const { store } = props;
this.state = {
...store,
fetchUsers: fetchUsers.bind(this),
selectUsers: selectUsers.bind(this),
};
}
render() {
return (
<StoreContext.Provider value={state}><children>
);
}
}

Using <Consumer />

loadUserButton.jsx

import consumer from './consumer'
function LoadUserButton({ fetchUsers }) {
return (
<button onClick={fetchUsers}>Load Users</button>
)
}
export default consumer('fetchUsers')(LoadUserButton)

userList.jsx

import consumer from './consumer'
function UserList({ selectUsers }) {
return (
<ul>
{selectUsers().map(user => (
<li>{user.firstName}{' '}{user.lastName}</li>
))}
</ul>
)
}
export default consumer('selectUsers')(UserList)

Selectors

selectors.js

export function selectUsers() {
return this.state.users
}

Fetching data

api.js

export async function fetchUsers() {
const { users } = await fetch('/api/v1/users').json()
this.setState({ users })
}