Skip to content

Latest commit

 

History

History
117 lines (85 loc) · 3.45 KB

React.md

File metadata and controls

117 lines (85 loc) · 3.45 KB
Raw

🏠 Home

Dynadux - React

How to use it in React apps/components

  1. Create a createAppStore
  2. On the body of the class declare store = createAppStore(() => this.setState({})).
  3. In the components use the this.store.state getter as a state or what ever your Business Store returns as State.
  4. Use the exposed methods of the this.store to change the state

Check out the Cart example

See all examples

How to make a Business Store React Hook

Our store

Imagine this business store.

const businessStore = (onChange) => {
  const store = createStore({
    onChange,
    initialState: {...},
    reducers: {...},
  })
  
  return {
    get state() { return store.state; },
    actions: {
      addTodo: todo => dispatch(...),
      removeTodo: id => dispatch(...),
    }
  }
}

Convert the store to hook

In Typescript

const useBusinessStore = () => {
  const [s, forceUpdate] = useState({});
  const appStoreRef = useRef<any>();

  return (
    appStoreRef.current
    || (
      appStoreRef.current = businessStore(() => forceUpdate({}))
    )
  ) as ReturnType<typeof businessStore>;;
};

We use the useRef of React to hold our store. On the first call, since it doesn't exist, we create it and save it to the appStoreRef.

When our Store has a change, we call the setState({}) where this triggers the render of the component.

The above hook returns the Business Store's API, the return of the businessStore function above.

You don't have to implement anything else in the hook! The above code is just a converter.

For typescript, there is no need to pass any interface, the hook gets the Business Store return type explicitly.

Use the business store as a hook

Use the hook.

const MyComponent = () => {
  const {
    state,
    actions,
  } = useBusinessStore();
  
  return (
    <div>
      {state.todos.map(...)}
      <button
        onClick={() => actions.addTodo(...)}
      >Add todo</button>
    </div>
  );
}

How to use it with Provider

Since v2.2.0 we have the react-dynadux.

Some nice features for small or large react applications

  • Any component can be connected without pass the store directly
  • Reduces the global renderings since it renders only the connected components

With react-dynadux, there are some more benefits

  • It "publishes" any App Store and not the state
  • On component's connection, there is a callback to control the render according to the dispatched action & payload

Check out the react-dynadux how to use it, it is super simple.

Read more