solid-redux-primitives-test
TypeScript icon, indicating that this package has built-in type declarations

0.1.7 • Public • Published

solid-redux-primitives

Redux primitives for Solid.

Installation

pnpm add @reduxjs/toolkit solid-redux-primitives // or npm or yarn

Quick Start

Create a Redux Store​

// app/store.js
import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
  reducer: {},
});

Provide the Redux Store to Solid

// index.js
import { render } from 'solid-js/web';
import { Provider } from 'solid-redux-primitives';

import App from './App';
import { store } from './store';

render(
  () => (
    <Provider store={store}>
      <App />
    </Provider>
  ),
  document.getElementById('root'),
);

Create a Redux State Slice​

// features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

Add Slice Reducers to the Store

// app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Use Redux State and Actions in Solid Components

Now we can use the Solid Redux primitives to let Solid components interact with the Redux store. We can read data from the store with useSelector, and dispatch actions using useDispatch.

import { useDispatch, useSelector } from 'solid-redux-primitives';
import { decrement, increment } from './store';

export function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <span>{count()}</span>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </>
  );
}

Usage with TypeScript

Define Typed Primitives

import { configureStore } from '@reduxjs/toolkit';
import type { TypedUseSelectorHook } from 'solid-redux-primitives';
import { useDispatch, useSelector } from 'solid-redux-primitives';

const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer,
    users: usersReducer,
  },
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

If you prefer not to use pre-typed primitives like the useAppSelector and useAppDispatch, here is how to type the primitives by themselves.

interface RootState {
  isOn: boolean
}

// TS infers type: (state: RootState) => boolean
const selectIsOn = (state: RootState) => state.isOn;

// TS infers `isOn` is boolean
const isOn = useSelector(selectIsOn);

// Inline
const isOn = useSelector((state: RootState) => state.isOn);

// store.ts
export type AppDispatch = typeof store.dispatch;

// MyComponent.tsx
const dispatch: AppDispatch = useDispatch();

API

useSelector

Allows you to extract data from the Redux store state, using a selector function.

import { useSelector } from 'solid-redux-primitives';

export const CounterComponent = () => {
  const count = useSelector(state => state.counter.value);
  return <div>{count()}</div>;
};

useDispatch

This hook primitive a reference to the dispatch function from the Redux store. You may use it to dispatch actions as needed.

import { useDispatch } from 'solid-redux-primitives';

export const CounterComponent = (props) => {
  const dispatch = useDispatch();
  const increaseCounter = dispatch({ type: 'increase-counter' });
  return (
    <div>
      <span>{props.count}</span>
      <button onClick={increaseCounter}>Increase counter</button>
    </div>
  );
};

useStore

This primitive returns a reference to the same Redux store that was passed in to the component.

import { useStore } from 'solid-redux-primitives';

export const ExampleComponent = () => {
  const store = useStore();
  return <div>{store.getState()}</div>;
};

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i solid-redux-primitives-test

Weekly Downloads

5

Version

0.1.7

License

MIT

Unpacked Size

62 kB

Total Files

43

Last publish

Collaborators

  • wobsoriano