Skip to content

Instantly share code, notes, and snippets.

@vinnihoke

vinnihoke/redux-guide.js

Last active August 25, 2020 00:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vinnihoke/95f07c72989022f95d2c5efdfeb993a4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vinnihoke/95f07c72989022f95d2c5efdfeb993a4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. vinnihoke revised this gist Oct 1, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -149,7 +149,7 @@ export default combineReducers({
    // Step 7: Consume Data with Hooks
    // How to consume the data using hooks within a functional component.

    // ! RFCE --> Tab for a new functional component if you're using ES7 extension in VS Code.
    // ! 'RAFC --> Tab' for a new functional component if you're using ES7 extension in VS Code.
    import React from "react";
    import { useDispatch, useSelector } from "react-redux";
    import { actionName } from "../actions/";
  2. vinnihoke revised this gist Sep 30, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    // Step 1: Setup Folders
    // Create an actions and a reducers folder. Then add an index.js file in both folders.
    // Required dependency installs: axios, redux, react-redux, redux-thunk

    ************************************************

  3. vinnihoke revised this gist Sep 30, 2019. 1 changed file with 3 additions and 4 deletions.
    7 changes: 3 additions & 4 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -56,17 +56,16 @@ export const actionName = payload => ({

    !!-------------------------------!!
    // If application requires Asyncronous actions
    import axios from 'axios';
    export const ACTION_NAME = "ACTION_NAME";
    export const FETCH_SUCCESS = "FETCH_SUCCESS";
    export const FETCH_TOGGLE = "FETCH_TOGGLE";

    // This is known as the action creator.
    export const actionName = () => dispatch => {
    dispatch({ type: FETCH_TOGGLE });
    fetch('https://api.kanye.rest/')
    .then(res => res.json())
    .then(res => dispatch({ type: FETCH_SUCCESS, payload: res.quote }))
    axios.get('https://api.kanye.rest/')
    .then(res => dispatch({ type: FETCH_SUCCESS, payload: res.data.quote }))
    .catch(err => dispatch({ type: FETCH_TOGGLE, payload: err }))
    };

  4. vinnihoke revised this gist Sep 30, 2019. 1 changed file with 6 additions and 13 deletions.
    19 changes: 6 additions & 13 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -66,7 +66,7 @@ export const actionName = () => dispatch => {
    dispatch({ type: FETCH_TOGGLE });
    fetch('https://api.kanye.rest/')
    .then(res => res.json())
    .then(res => dispatch({ type: FETCH_SUCCESS, payload: res.data.results }))
    .then(res => dispatch({ type: FETCH_SUCCESS, payload: res.quote }))
    .catch(err => dispatch({ type: FETCH_TOGGLE, payload: err }))
    };

    @@ -83,13 +83,6 @@ const initialState = {
    date: Date.now()
    };

    // Use this if following along for async redux. Remove the above initialState.
    // const initialState = {
    // kanyeism: '',
    // error: '',
    // isFetching: false
    // }

    const newReducer = (state = initialState, action) => {
    switch (action.type) {
    case ACTION_NAME:
    @@ -110,10 +103,10 @@ export default newReducer;
    import { FETCH_TOGGLE, FETCH_SUCCESS } from '../actions/;

    const initialState = {
    store: [],
    error: '',
    isFetching: false
    };
    kanyeism: '',
    error: '',
    isFetching: false
    }

    const asyncReducer = (state = initialState, action) => {
    switch(action.type){
    @@ -126,7 +119,7 @@ const asyncReducer = (state = initialState, action) => {
    case FETCH_SUCCESS:
    return {
    ...state,
    store: action.payload,
    kanyeism: action.payload,
    isFetching: false,
    error: ''
    default:
  5. vinnihoke revised this gist Sep 30, 2019. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -83,6 +83,13 @@ const initialState = {
    date: Date.now()
    };

    // Use this if following along for async redux. Remove the above initialState.
    // const initialState = {
    // kanyeism: '',
    // error: '',
    // isFetching: false
    // }

    const newReducer = (state = initialState, action) => {
    switch (action.type) {
    case ACTION_NAME:
  6. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 20 additions and 8 deletions.
    28 changes: 20 additions & 8 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ export default configRedux;

    ************************************************

    // Step 3: Setup index.js
    // Step 3: Setup root index.js, or App.js
    // Import configRedux() into index.js and wrap <App />

    import configRedux from '../configRedux';
    @@ -59,13 +59,15 @@ export const actionName = payload => ({

    export const ACTION_NAME = "ACTION_NAME";
    export const FETCH_SUCCESS = "FETCH_SUCCESS";
    export const FETCH_FAIL = "FETCH_TOGGLE";
    export const FETCH_TOGGLE = "FETCH_TOGGLE";

    // This is known as the action creator.
    export const actionName = () => dispatch => {
    dispatch({ type: FETCH_START });
    fetch(url).then(res => dispatch({ type: FETCH_SUCCESS, payload: res.data.results })).catch(err => dispatch({ type: FETCH_FAIL }))
    dispatch({ type: 'ACTION_NAME", payload }) }
    dispatch({ type: FETCH_TOGGLE });
    fetch('https://api.kanye.rest/')
    .then(res => res.json())
    .then(res => dispatch({ type: FETCH_SUCCESS, payload: res.data.results }))
    .catch(err => dispatch({ type: FETCH_TOGGLE, payload: err }))
    };


    @@ -94,12 +96,11 @@ const newReducer = (state = initialState, action) => {
    };

    export default newReducer;
    // Now that it's exported, import it into @/reducers/index.js. Add to the combineReducers function in the export default.

    !!-------------------------------!!

    // Create a new reducer and import actions from appropriate action file; in this case it's index.js
    import { FETCH_TOGGLE, FETCH_SUCCESS } from '../actions/index.js;
    import { FETCH_TOGGLE, FETCH_SUCCESS } from '../actions/;

    const initialState = {
    store: [],
    @@ -151,7 +152,7 @@ export default combineReducers({
    // ! RFCE --> Tab for a new functional component if you're using ES7 extension in VS Code.
    import React from "react";
    import { useDispatch, useSelector } from "react-redux";
    import { actionName } from "../actions/index.js";
    import { actionName } from "../actions/";

    const NewComponent = props => {
    const store = useSelector(state => state.newReducer);
    @@ -165,6 +166,17 @@ const NewComponent = props => {
    </button>
    </div>
    );
    // Use this return for an async component
    // return (
    // <div>
    // {console.log(store)}
    // <span>{store.kanyeism}</span>
    // <button onClick={() => dispatch(actionName())}>New Kanyeism</button>
    // </div>
    // );


    };

    export default NewComponent;
    // Import the NewComponent into the root index.js file.
  7. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -75,7 +75,7 @@ export const actionName = () => dispatch => {
    // @/reducers/newReducer
    // Create a new reducer and import actions from appropriate action file; in this case it's index.js

    import { ACTION_NAME } from "../actions/index.js";
    import { ACTION_NAME } from "../actions/";

    const initialState = {
    date: Date.now()
  8. vinnihoke revised this gist Sep 27, 2019. No changes.
  9. vinnihoke revised this gist Sep 27, 2019. No changes.
  10. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -55,8 +55,8 @@ export const actionName = payload => ({
    });

    !!-------------------------------!!

    // If application requires Asyncronous actions

    export const ACTION_NAME = "ACTION_NAME";
    export const FETCH_SUCCESS = "FETCH_SUCCESS";
    export const FETCH_FAIL = "FETCH_TOGGLE";
    @@ -102,7 +102,7 @@ export default newReducer;
    import { FETCH_TOGGLE, FETCH_SUCCESS } from '../actions/index.js;

    const initialState = {
    store=[],
    store: [],
    error: '',
    isFetching: false
    };
  11. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 58 additions and 0 deletions.
    58 changes: 58 additions & 0 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,6 +13,18 @@ const configRedux = () => createStore(reducer);

    export default configRedux;

    !!-------------------------------!!

    // If application requires Asyncronous action creators
    import { createStore, applyMiddleware } from 'redux';
    import reducer from './src/reducers';
    import thunk from 'redux-thunk';

    const configRedux = () => createStore(reducer, applyMiddleware(thunk));

    export default configRedux;


    ************************************************

    // Step 3: Setup index.js
    @@ -42,6 +54,20 @@ export const actionName = payload => ({
    payload: payload
    });

    !!-------------------------------!!

    // If application requires Asyncronous actions
    export const ACTION_NAME = "ACTION_NAME";
    export const FETCH_SUCCESS = "FETCH_SUCCESS";
    export const FETCH_FAIL = "FETCH_TOGGLE";

    // This is known as the action creator.
    export const actionName = () => dispatch => {
    dispatch({ type: FETCH_START });
    fetch(url).then(res => dispatch({ type: FETCH_SUCCESS, payload: res.data.results })).catch(err => dispatch({ type: FETCH_FAIL }))
    dispatch({ type: 'ACTION_NAME", payload }) }
    };


    ************************************************

    @@ -70,6 +96,38 @@ const newReducer = (state = initialState, action) => {
    export default newReducer;
    // Now that it's exported, import it into @/reducers/index.js. Add to the combineReducers function in the export default.

    !!-------------------------------!!

    // Create a new reducer and import actions from appropriate action file; in this case it's index.js
    import { FETCH_TOGGLE, FETCH_SUCCESS } from '../actions/index.js;

    const initialState = {
    store=[],
    error: '',
    isFetching: false
    };

    const asyncReducer = (state = initialState, action) => {
    switch(action.type){
    case FETCH_TOGGLE:
    return {
    ...state,
    isFetching: !state.isFetching,
    error: action.payload ? action.payload : ''
    }
    case FETCH_SUCCESS:
    return {
    ...state,
    store: action.payload,
    isFetching: false,
    error: ''
    default:
    return state;
    }
    }

    export default asyncReducer;


    ************************************************

  12. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ const store = configRedux();

    ************************************************

    // ! Step 4: Create ../actions/index.js File
    // Step 4: Create ../actions/index.js File
    // @/actions/index.js
    // You'll want to export const any actions then wrap that variable into a function.

  13. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 7 additions and 8 deletions.
    15 changes: 7 additions & 8 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    // Step 1:
    // Step 1: Setup Folders
    // Create an actions and a reducers folder. Then add an index.js file in both folders.

    ************************************************

    // Step 2:
    // Step 2: Create Redux Config File
    // @ Root of application create a <config>.js file.

    import { createStore } from 'redux';
    @@ -15,7 +15,7 @@ export default configRedux;

    ************************************************

    // Step 3:
    // Step 3: Setup index.js
    // Import configRedux() into index.js and wrap <App />

    import configRedux from '../configRedux';
    @@ -30,7 +30,7 @@ const store = configRedux();

    ************************************************

    // Step 4
    // ! Step 4: Create ../actions/index.js File
    // @/actions/index.js
    // You'll want to export const any actions then wrap that variable into a function.

    @@ -45,7 +45,7 @@ export const actionName = payload => ({

    ************************************************

    // Step 5
    // Step 5: Create a newReducer
    // @/reducers/newReducer
    // Create a new reducer and import actions from appropriate action file; in this case it's index.js

    @@ -73,8 +73,7 @@ export default newReducer;

    ************************************************

    // Step 6
    // @/reducers/index.js
    // Step 6: Create ../reducers/index.js File

    import { combineReducers } from 'redux';
    import newReducer from '../reducers/newReducer';
    @@ -88,7 +87,7 @@ export default combineReducers({

    ************************************************

    // Step 7
    // Step 7: Consume Data with Hooks
    // How to consume the data using hooks within a functional component.

    // ! RFCE --> Tab for a new functional component if you're using ES7 extension in VS Code.
  14. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -49,23 +49,23 @@ export const actionName = payload => ({
    // @/reducers/newReducer
    // Create a new reducer and import actions from appropriate action file; in this case it's index.js

    import { ACTION_NAME } from '../actions/index.js';
    import { ACTION_NAME } from "../actions/index.js";

    const initialState = {
    date: Date.now()
    }
    const newReducer = (state = initialState, action) => {
    switch(action.type){
    case ACTION_NAME:
    return {
    // Action Logic
    ...state,
    initialStateKey: action.payload
    };
    default:
    return state;
    }
    }
    date: Date.now()
    };

    const newReducer = (state = initialState, action) => {
    switch (action.type) {
    case ACTION_NAME:
    return {
    ...state,
    date: action.payload
    };
    default:
    return state;
    }
    };

    export default newReducer;
    // Now that it's exported, import it into @/reducers/index.js. Add to the combineReducers function in the export default.
  15. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 18 additions and 16 deletions.
    34 changes: 18 additions & 16 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -51,7 +51,7 @@ export const actionName = payload => ({

    import { ACTION_NAME } from '../actions/index.js';
    const initialState = {
    state: []
    date: Date.now()
    }
    const newReducer = (state = initialState, action) => {
    switch(action.type){
    @@ -92,20 +92,22 @@ export default combineReducers({
    // How to consume the data using hooks within a functional component.

    // ! RFCE --> Tab for a new functional component if you're using ES7 extension in VS Code.

    import { useDispatch, useSelector } from 'react-redux';
    import { actionName } from '../actions/index.js';
    import React from "react";
    import { useDispatch, useSelector } from "react-redux";
    import { actionName } from "../actions/index.js";

    const NewComponent = props => {
    // How to consume state

    // This const can be labeled anything but the state.initialState must be something from the /reducers/index.js export default combineReducers({initialState})
    const store = useSelector(state => state.newReducer)

    // How to consume actions

    const dispatch = useDispatch();
    return

    <button onClick={() => dispatch(actionName(props.somethingIfNecessary))}>Text</button>
    }
    const store = useSelector(state => state.newReducer);
    const dispatch = useDispatch();

    return (
    <div>
    <span>{store.date}</span>
    <button onClick={() => dispatch(actionName(`${Date.now()}`))}>
    Change Date
    </button>
    </div>
    );
    };

    export default NewComponent;
  16. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 34 additions and 24 deletions.
    58 changes: 34 additions & 24 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,9 +7,9 @@
    // @ Root of application create a <config>.js file.

    import { createStore } from 'redux';
    import <rootReducer or similar> from './reducers';
    import reducer from './src/reducers';

    const configRedux = () => createStore(rootReducer);
    const configRedux = () => createStore(reducer);

    export default configRedux;

    @@ -18,30 +18,19 @@ export default configRedux;
    // Step 3:
    // Import configRedux() into index.js and wrap <App />

    import configRedux from './configRedux';
    import configRedux from '../configRedux';
    import { Provider } from 'react-redux';

    const store = configRedux();

    //Here you'll wrap App in the ReactDOM render
    // Here you'll wrap App in the ReactDOM render
    <Provider store={store}> <App/> </Provider>

    ************************************************

    // Step 4
    // @/reducers/index.js

    import { combineReducers } from 'redux';
    // You'll also need to import any other necessary custom reducers.

    export default combineReducers({
    newReducerGoesHereAfterExportingInStep6,
    otherReducerIfNecessary
    });
    // Don't worry... The app is freaking out because we haven't built the reducer yet.

    ************************************************

    // Step 5
    // Step 4
    // @/actions/index.js
    // You'll want to export const any actions then wrap that variable into a function.

    @@ -53,13 +42,14 @@ export const actionName = payload => ({
    payload: payload
    });


    ************************************************

    // Step 6
    // Step 5
    // @/reducers/newReducer
    // Create a new reducer and import actions from appropriate action file; in this case it's index.js

    import { ACTION_NAME } from './actions/index.js';
    import { ACTION_NAME } from '../actions/index.js';
    const initialState = {
    state: []
    }
    @@ -68,6 +58,8 @@ const newReducer = (state = initialState, action) => {
    case ACTION_NAME:
    return {
    // Action Logic
    ...state,
    initialStateKey: action.payload
    };
    default:
    return state;
    @@ -78,6 +70,22 @@ const newReducer = (state = initialState, action) => {
    export default newReducer;
    // Now that it's exported, import it into @/reducers/index.js. Add to the combineReducers function in the export default.


    ************************************************

    // Step 6
    // @/reducers/index.js

    import { combineReducers } from 'redux';
    import newReducer from '../reducers/newReducer';
    // You'll also need to import any other necessary custom reducers.

    export default combineReducers({
    newReducer
    // Include any other reducers required by your application.
    });


    ************************************************

    // Step 7
    @@ -86,16 +94,18 @@ export default newReducer;
    // ! RFCE --> Tab for a new functional component if you're using ES7 extension in VS Code.

    import { useDispatch, useSelector } from 'react-redux';
    import { actionName } from './actions/index.js';
    import { actionName } from '../actions/index.js';

    const newComponent = props => {
    const NewComponent = props => {
    // How to consume state

    // This const can be labeled anything but the state.initialState must be something from the /reducers/index.js export default combineReducers({initialState})
    const anything = useSelector(state => state.initialState)
    const store = useSelector(state => state.newReducer)

    // How to consume actions

    const dispatch = useDispatch();
    return <button onClick={() => dispatch(actionName(props.somethingIfNecessary))}>Text</button>
    return

    <button onClick={() => dispatch(actionName(props.somethingIfNecessary))}>Text</button>
    }
  17. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -47,6 +47,7 @@ export default combineReducers({

    export const ACTION_NAME = "ACTION_NAME";

    // This is known as the action creator.
    export const actionName = payload => ({
    type: ACTION_NAME,
    payload: payload
  18. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,7 @@ export default configRedux;
    ************************************************

    // Step 3:
    // Import into index.js and wrap <App />
    // Import configRedux() into index.js and wrap <App />

    import configRedux from './configRedux';
    import { Provider } from 'react-redux';
  19. vinnihoke revised this gist Sep 27, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -74,7 +74,7 @@ const newReducer = (state = initialState, action) => {
    }


    export const newReducer;
    export default newReducer;
    // Now that it's exported, import it into @/reducers/index.js. Add to the combineReducers function in the export default.

    ************************************************
  20. vinnihoke revised this gist Sep 26, 2019. No changes.
  21. vinnihoke created this gist Sep 26, 2019.
    100 changes: 100 additions & 0 deletions redux-guide.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    // Step 1:
    // Create an actions and a reducers folder. Then add an index.js file in both folders.

    ************************************************

    // Step 2:
    // @ Root of application create a <config>.js file.

    import { createStore } from 'redux';
    import <rootReducer or similar> from './reducers';

    const configRedux = () => createStore(rootReducer);

    export default configRedux;

    ************************************************

    // Step 3:
    // Import into index.js and wrap <App />

    import configRedux from './configRedux';
    import { Provider } from 'react-redux';

    const store = configRedux();

    //Here you'll wrap App in the ReactDOM render
    <Provider store={store}> <App/> </Provider>

    ************************************************

    // Step 4
    // @/reducers/index.js

    import { combineReducers } from 'redux';
    // You'll also need to import any other necessary custom reducers.

    export default combineReducers({
    newReducerGoesHereAfterExportingInStep6,
    otherReducerIfNecessary
    });

    ************************************************

    // Step 5
    // @/actions/index.js
    // You'll want to export const any actions then wrap that variable into a function.

    export const ACTION_NAME = "ACTION_NAME";

    export const actionName = payload => ({
    type: ACTION_NAME,
    payload: payload
    });

    ************************************************

    // Step 6
    // @/reducers/newReducer
    // Create a new reducer and import actions from appropriate action file; in this case it's index.js

    import { ACTION_NAME } from './actions/index.js';
    const initialState = {
    state: []
    }
    const newReducer = (state = initialState, action) => {
    switch(action.type){
    case ACTION_NAME:
    return {
    // Action Logic
    };
    default:
    return state;
    }
    }


    export const newReducer;
    // Now that it's exported, import it into @/reducers/index.js. Add to the combineReducers function in the export default.

    ************************************************

    // Step 7
    // How to consume the data using hooks within a functional component.

    // ! RFCE --> Tab for a new functional component if you're using ES7 extension in VS Code.

    import { useDispatch, useSelector } from 'react-redux';
    import { actionName } from './actions/index.js';

    const newComponent = props => {
    // How to consume state

    // This const can be labeled anything but the state.initialState must be something from the /reducers/index.js export default combineReducers({initialState})
    const anything = useSelector(state => state.initialState)

    // How to consume actions

    const dispatch = useDispatch();
    return <button onClick={() => dispatch(actionName(props.somethingIfNecessary))}>Text</button>
    }