Replacing redux with react hooks and context (part 1)

Richard Oliver Bray
Feb 9 · 8 min read

What we’re building

Rick and Morty episode selector

The Setup

Create react app starter screen

The Redux principles

The redux principles or, redux flow
function actionFunc(dispatch) {
return dispatch({ type: 'COMPLETE_TODO', payload: 1 })
}
function visibilityFilter(state, action) {   
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.payload;
default:
return state;
}
}
{   
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
}
]
}

Creating our Store

export function StoreProvider(props) {
return <Store.Provider value='data from store'>{props.children}
</Store.Provider>
}
ReactDOM.render(
<StoreProvider>
<App />
</StoreProvider>,
document.getElementById('root')
);
import { Store } from './Store';
const store = React.useContext(Store);
Data from the store in your console

What your file structure should look like at this point

Creating our Reducer

const initialState = {
episodes: [],
favourites: []
};
function reducer(state, action) {
switch (action.type) {
case 'FETCH_DATA':
return { ...state, episodes: action.payload };
default:
return state;
}
}
const [state, dispatch] = React.useReducer(reducer, initialState);
const value = { state, dispatch };
const value = {
state: state,
dispatch: dispatch
}
value={value}
const { state, dispatch } = React.useContext(Store);

Creating our Action

const fetchDataAction = async () => {}
React.useEffect(() => {
state.episodes.length === 0 && fetchDataAction();
});
Look at all that data

Let’s take a break…



Octopus Labs London

We're the fintech innovation unit of the Octopus Group. We're building smart financial products and using tech to drive cultural change. Want to join us on the journey?

Richard Oliver Bray

Written by

Front end developer @OctopusLabs. Novice photographer, speaker and player of video games.

Octopus Labs London

We're the fintech innovation unit of the Octopus Group. We're building smart financial products and using tech to drive cultural change. Want to join us on the journey?