• 1. Introduction
  • 2. Basic usage
    • 2.1 providerState: Used to add data to the Store
    • 2.2 injectState is used to pass data from the Store to the UI component
    • 2.3 Effects is used to change the data in the Store and update the component
    • 2.4 initialState defines the initialState
  • 3. Application in projects
    • 3.1 Storing Shared Data
    • 3.2 # Update components in complex scenarios
  • 4. Take an example of an operation in a project
  • conclusion

1. Introduction

Single-page applications still need a state manager. I tried Redux before, but it was too tedious to write and needed to install dependencies, so I got rid of it and used a simpler Freactal.

2. Basic usage

2.1 providerState Is used to add data to the store.

providerState({
  initialState,
  effects,
  computed,
})
Copy the code

Unlike redux, freactal can set multiple stores, so providerState has a feature: if a component loaded first uses providerState to provide data, then a component loaded later uses providerState to pass in an empty object. You can also get the data previously stored in the store, such as:

providerState({})
Copy the code

If you don’t need the data in another store, you can filter it using injectState. If you don’t need the data in another store, you can filter it using injectState.

2.2 injectState is used to pass data from the Store to the UI component

injectState(component, key)
Copy the code

The key is used to filter the data in the store. If a component that is loaded first uses providerState to add data to the store, then a component that is loaded later uses providerState to add data to the store, so filter the data that you need by injectState, only the data that is filtered will change. The update of the corresponding component is triggered.

2.3 Effects is used to change the data in the Store and update the component

const effects = {
  changeMenu: (effects, args) => mergeIntoState({currentMenu: args})
}
Copy the code
  • The args was introduced into the external parameters, such as this. Props. Effects. ChangeMenu (‘/record)
  • MergeIntoState is equivalent to reducer and is used to change data in the store

2.4 initialState defines the initialState

const initialState = () => ({
  active: 'hello'
})
Copy the code

See the documentation for more apis: Freactal

3. Application in projects

At first, when contacting the state management container, I directly threw the data in the interface request into the store. In fact, this was unnecessary and would make the writing of the code very tedious. Therefore, I carefully thought about the original intention of using the state management container and summarized the following points:

3.1 Storing Shared Data

When developing with React, components are often refined. When there are many layers of components and data is passed down one layer at a time, the writing experience becomes very bad. In a single-page application, this shortcoming is magnified.

If there is data that needs to be shared among multiple components, store it. This way, no matter how deep in the component hierarchy, everyone can use this.props.

3.2 Updating Components in Complex Scenarios

For example, when a descendant component needs to update the state of an ancestor component to display a Modal, the code would look like this: Define a method in the ancestor component:

showModal = (bool) => {
  this.setState({show: bool});
}
Copy the code

Method is passed through the layers to a descendant component that calls the method

this.props.showModal(true)
Copy the code

The code is getting cumbersome and not elegant, so let’s put this state in the store, and when the data in the store changes, the UI will be updated, and the same is true for updating the UI between the data in the sibling components.

4. Take an example of an operation in a project

Define store. Js

import { mergeIntoState } from 'freactal'; Const initialState = () => ({active:'1'}); const effects = { toggleRadio: (effect, args) => mergeIntoState({active: args}) };export default {
  initialState,
  effects
};
Copy the code

Encapsulation withStore. Js

import { provideState, injectState } from 'freactal';
import createLogger from 'freactal-logger';

export default (store, keys) => (statefull) => {
  const middleware = [];
  if (process.env.NODE_ENV === 'development') {
    const logger = createLogger({
      collapsed: true
    });
    middleware.push(logger);
  }
  returnprovideState({ ... store, middleware })(injectState(statefull, keys)); }Copy the code
  • The createLogger is a Logger that can see changes to the data in the Store

The UI component connects to the Store

import store from './store';
import withStore from './withStore';

@withStore(store, ['active'])
class Result extends React.Component {}
Copy the code

5. Conclusion

React16.3.1 has been updated with the new Context API, which makes it easier to manipulate shared data, but it is not a replacement for the state management container, which is still needed for complex scenarios in single-page applications.

The original connection