Vuex - But for React! ⚛

Enjoy the vuex API in your React applications with vuex-but-for-react, which uses only React Context and React use-sync-external-store under the hood.

vuex-but-for-react was engineered with developer experience in mind, making it very easy to use. Invoke your getter or action by using a one-line hook and don't worry about unnecessary renders - without using memo.

Your component will render only when its getter changes - and it doesn't care about the rest of the store!

Are you on board? Read more 👇

Installation

npm install vuex-but-for-react --save

yarn add vuex-but-for-react

TS support included ✨

---

🚨 React versions

vuex-but-for-react >= 3.0.0 works with React 18.0.0+

To use with older react versions, please install vuex-but-for-react 2.0.6

Working example

store.js

1const store = {
2  state: {
3    posts: []
4  },
5  mutations: {
6    POSTS_SET(state, data) {
7      state.posts = data
8    }
9  },
10  actions: {
11    async POSTS_FETCH(context) {
12      const response = await fetch('https://jsonplaceholder.typicode.com/posts')
13      const data = await response.json()
14      context.mutations.POSTS_SET(data)
15    }
16  },
17  getters: {
18    posts (state) {
19      return state.posts
20    }
21  }
22}

index.js

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { withStore } from 'vuex-but-for-react';
4
5import App from './App';
6import store from './store';
7
8const AppWithStore = withStore(App, store);
9
10ReactDOM.render(
11  <AppWithStore />,
12  document.getElementById('root')
13);

Posts.js

1import React, { useEffect } from 'react';
2import { useAction, useGetter } from 'vuex-but-for-react';
3
4const Posts = () => {
5  const handleAction = useAction('POSTS_FETCH');
6  const posts = useGetter('posts');
7
8  useEffect(() => {
9    handleAction();
10  }, [handleAction]) // don't worry, it doesn't re-create!
11  
12  return (
13    <ul>
14      {posts.map(post => <li key={post.id}>{post.title}</li>)}
15    </ul>
16  );
17}
18
19export default Posts

Check the examples section to see JavaScript and TypeScript working apps!

API

useAction(actionName)

An action is used for async data logic, especially API calls. You can dispatch mutations and other actions from within an action.

The function returned by the useAction() hook is never re-created.

1import { useAction } from 'vuex-but-for-react';
2
3const PostsPage = () => {
4  const handleFetch = useAction('POSTS_FETCH');
5
6  useEffect(() => {
7    handleFetch();
8  }, [handleFetch])
9
10  return (
11    ...
12  )
13}

useMutation(actionName)

A mutation is used for sync data operations. It has access to the current state in order to alter it.

The function returned by the useMutation() hook is never re-created.

1import { useMutation } from 'vuex-but-for-react';
2
3const Counter = () => {
4  const handleIncrement = useMutation('COUNTER_INCREMENT');
5  const handleDecrement = useMutation('COUNTER_DECREMENT');
6
7  return (
8    <>
9      <button onClick={handleDecrement}>-</button>
10      <button onClick={handleIncrement}>+</button>
11    </>
12  )
13}

useGetter(actionName)

A getter gives you the current stored value based on your config. It has access to the current state.

The data returned by the useGetter() hook is updated only in case the shallow value changes. An update of one getter value won't trigger the update of another getter value.

1import { useGetter } from 'vuex-but-for-react';
2
3const PostsPage = () => {
4  const posts = useGetter('posts');
5
6  return (
7    <ul>
8      {posts.map(post => (
9        <li key={post.id}>{post.title}</li>
10      ))}
11    </ul>
12  )
13}

withStore(Component, config)

In order to initialize the global store, wrap your (chosen) root component in your store config.

1import { withStore } from 'vuex-but-for-react';
2
3const AppWithStore = withStore(App, store);

And more amazing stuff!

useActionOnMount(actionName)

Avoid calling useEffect manually. Just pass the action name and it will be executed on component mount automatically.

1import { useActionOnMount, useGetter } from 'vuex-but-for-react';
2
3const PostsPage = () => {
4  useActionOnMount('POSTS_FETCH');
5  const posts = useGetter('posts');
6
7  return (
8    ...
9  )
10}