simple-redux-store

Simple storage scheme based on React Hooks/Redux

The installation

NPM NPM/yarn

$ npm install --save simple-redux-store
$ yarn add simple-redux-store
Copy the code

use

1. Create a store

import React, { Suspense } from 'react';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import { Provider, configureStore } from 'simple-redux-store';
import routes from './RouteConfig';
import { Spin } from 'antd';
import './App.less';

const Routes = () = > {
  // Initial state [optional]
  const initState = { name: 'John Steinbeck'.age: 18 };

  // Create a store based on the initial state
  const store = configureStore(initState);

  return (
    <Provider store={store}>
      <ConfigProvider locale={zhCN}>
        <BrowserRouter>
          <Suspense fallback={<Spin />} ><Switch>
              {routes.map((route, idx) => (
                <Route
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  component={route.component}
                />
              ))}
              <Route render={()= > <div>page not found</div>} / ></Switch>
          </Suspense>
        </BrowserRouter>
      </ConfigProvider>
    </Provider>
  );
};

export default Routes;


Copy the code

2. Read/update the Store

import React, { useState, useEffect } from 'react';
import { useSelector, useUpdateStore } from 'simple-redux-store';

const Page = () = > {
  // Read the redux store
  const app = useSelector((s) = > s.app);
  // To update the store
  const updateStore = useUpdateStore();

  useEffect(() = > {
    updateStore({ name: 'Little Dragon Lady'.age: 35.gender: 'female'}); } []); };Copy the code

Redux status before and after the update