Skip to content

Instantly share code, notes, and snippets.

@chengsokdara

chengsokdara/useStore.js

Last active June 20, 2024 10:09
Download ZIP

Revisions

  1. chengsokdara revised this gist Mar 9, 2023. 1 changed file with 23 additions and 20 deletions.
    43 changes: 23 additions & 20 deletions useStore.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,6 @@
    // Author: Mr. Cheng Sokdara
    // Author: Sokdara Cheng
    // Contact me for web or mobile app development using React or React Native
    // https://chengsokdara.github.io
    import React, { createContext, useContext, useReducer } from "react";
    import initialState from "./initialState"; // object of initial states
    import reducer from "./reducer"; // https://reactjs.org/docs/hooks-reference.html#usereducer
    @@ -25,22 +27,23 @@ export default StoreProvider;
    *
    * - change state by passing action to dispatch
    * dispatch({ type: 'TEST_ACTION', payload: { test: 'new value' } })
    */

    // initialState.js
    export default {
    test: "test",
    };

    // reducer.js
    export default (state, action) => {
    switch (action.type) {
    case "TEST_ACTION":
    return {
    ...state,
    ...action.payload,
    };
    default:
    return state;
    }
    };
    *
    *
    * // initialState.js
    * export default {
    * test: "test",
    * };
    *
    * // reducer.js
    * export default (state, action) => {
    * switch (action.type) {
    * case "TEST_ACTION":
    * return {
    * ...state,
    * ...action.payload,
    * };
    * default:
    * return state;
    * }
    * };
    */
  2. chengsokdara revised this gist Oct 15, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion useStore.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ export default StoreProvider;
    * dispatch({ type: 'TEST_ACTION', payload: { test: 'new value' } })
    */

    // inititalState.js
    // initialState.js
    export default {
    test: "test",
    };
  3. chengsokdara revised this gist Oct 15, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion useStore.js
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@ export default StoreProvider;
    * const { state, dispatch } = useStore()
    *
    * - change state by passing action to dispatch
    * dispatch({ type: 'ACTION', payload: { test: 'new value' } })
    * dispatch({ type: 'TEST_ACTION', payload: { test: 'new value' } })
    */

    // inititalState.js
  4. chengsokdara revised this gist Oct 15, 2020. 1 changed file with 22 additions and 1 deletion.
    23 changes: 22 additions & 1 deletion useStore.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,12 +14,33 @@ const StoreProvider = ({ children }) => {
    };
    export const useStore = () => useContext(Store);
    export default StoreProvider;

    /*
    * How To Use:
    * - wrap root App component with StoreProvider
    * <StoreProvider><App><StoreProvider>
    *
    * - call useStore to get state and dispatch
    * const { state, dispatch } = useStore()
    *
    * - change state by passing action to dispatch
    * dispatch({ type: 'ACTION', payload: { test: 'new value' } })
    */
    */

    // inititalState.js
    export default {
    test: "test",
    };

    // reducer.js
    export default (state, action) => {
    switch (action.type) {
    case "TEST_ACTION":
    return {
    ...state,
    ...action.payload,
    };
    default:
    return state;
    }
    };
  5. chengsokdara created this gist Oct 14, 2020.
    25 changes: 25 additions & 0 deletions useStore.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    // Author: Mr. Cheng Sokdara
    import React, { createContext, useContext, useReducer } from "react";
    import initialState from "./initialState"; // object of initial states
    import reducer from "./reducer"; // https://reactjs.org/docs/hooks-reference.html#usereducer
    const Store = createContext({
    dispatch: () => null,
    state: initialState,
    });
    const StoreProvider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
    <Store.Provider value={{ dispatch, state }}>{children}</Store.Provider>
    );
    };
    export const useStore = () => useContext(Store);
    export default StoreProvider;
    /*
    * How To Use:
    * - wrap root App component with StoreProvider
    * <StoreProvider><App><StoreProvider>
    * - call useStore to get state and dispatch
    * const { state, dispatch } = useStore()
    * - change state by passing action to dispatch
    * dispatch({ type: 'ACTION', payload: { test: 'new value' } })
    */