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
Step by Step Redux Guide:
Raw
redux-guide.js
// 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 reducer from './src/reducers';
const configRedux = () => createStore(reducer);
export default configRedux;
************************************************
// Step 3:
// Import configRedux() 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>
// Don't worry... The app is freaking out because we haven't built the reducer yet.
************************************************
// Step 4
// @/actions/index.js
// You'll want to export const any actions then wrap that variable into a function.
export const ACTION_NAME = "ACTION_NAME";
// This is known as the action creator.
export const actionName = payload => ({
type: ACTION_NAME,
payload: payload
});
************************************************
// 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';
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;
}
}
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
// 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 React from "react";
import { useDispatch, useSelector } from "react-redux";
import { actionName } from "../actions/index.js";
const NewComponent = props => {
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;
@macjabeth
Copy link

macjabeth commented Sep 26, 2019

  1. Decide on your application state.
  2. Create a separate reducer to handle each piece of state.
    1. Each piece of state would be a key on an object (ie. todos and task)
    2. Initially just set up the default switch case that returns the state.
  3. Decide which actions each reducer needs to handle (if any).
    1. Create an action constant for each action and export it. This helps with intellisense.
    2. Write an action creator for each action - a function that returns an object with type (and payload if necessary) properties. The payload can be named whatever you want.
  4. Import the constants you created into their associated reducers and handle state logic for each action.
  5. Now create an index file that imports all your reducers and exports a combined rootReducer (using the combineReducers function from redux).
  6. Create your store using the createStore function from redux, which takes in the rootReducer you exported, and any middleware you want to attach.
  7. Import the context Provider from react-redux and wrap your app around it in the root index file. Pass your created store as a prop.
  8. You are now free to use Redux’ hooks or connect HOC to handle state in your app.

@macjabeth
Copy link

macjabeth commented Sep 26, 2019

Also make sure you're exporting the default reducer on line 77, not a redefined constant.

@vinnihoke
Copy link
Author

vinnihoke commented Sep 30, 2019

Added a few corrections to the Async code-along.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment