REDUX with FreeCodeCamp

REDUX with FreeCodeCamp

Dec 06, 2022

Create a Redux Store

const reducer = (state = 5) => {

  return state;

}


const store = Redux.createStore(reducer)

Get State from the Redux Store

const store = Redux.createStore(

  (state = 5) => state

);


const currentState = store.getState()

Define a Redux Action

const action = {

  type: 'LOGIN'

}

Define an Action Creator

const action = {

  type: 'LOGIN'

}

const actionCreator = () => {

  return action 

}

Dispatch an Action Event

onst store = Redux.createStore(

  (state = {login: false}) => state

);


const loginAction = () => {  return {    type: 'LOGIN'  }};
store.dispatch(loginAction())

Handle an Action in the Store

const defaultState = {

  login: false

};


const reducer = (state = defaultState, action) => {  if (action.type === "LOGIN") {  return {    login:true   }} else  {  return state}  };
const store = Redux.createStore(reducer);
const loginAction = () => {  return {    type: 'LOGIN'  }};

Use a Switch Statement to Handle Multiple Actions

const defaultState = {

  authenticated: false

};


const authReducer = (state = defaultState, action) => {switch (action.type) {    case "LOGIN":      return {        authenticated: true      };
    case "LOGOUT":      return {        authenticated: false      };
    default:      return defaultState;}};
const store = Redux.createStore(authReducer);
const loginUser = () => {  return {    type: 'LOGIN'  }};
const logoutUser = () => {  return {    type: 'LOGOUT'  }};

Use const for Action Types

const LOGIN = "LOGIN"

const LOGOUT = "LOGOUT"


const defaultState = {  authenticated: false};
const authReducer = (state = defaultState, action) => {
  switch (action.type) {    case LOGIN:       return {        authenticated: true      }    case LOGOUT:       return {        authenticated: false      }
    default:      return state;
  }
};
const store = Redux.createStore(authReducer);
const loginUser = () => {  return {    type: LOGIN  }};
const logoutUser = () => {  return {    type: LOGOUT  }};

Register a Store Listener

const ADD = 'ADD';


const reducer = (state = 0, action) => {  switch(action.type) {    case ADD:      return state + 1;    default:      return state;  }};
const store = Redux.createStore(reducer);

let count = 0;
const cb = () => { count++ }store.subscribe(cb) 
store.dispatch({type: ADD});console.log(count);store.dispatch({type: ADD});console.log(count);store.dispatch({type: ADD});console.log(count);

Combine Multiple Reducers

const INCREMENT = 'INCREMENT';

const DECREMENT = 'DECREMENT';


const counterReducer = (state = 0, action) => {  switch(action.type) {    case INCREMENT:      return state + 1;    case DECREMENT:      return state - 1;    default:      return state;  }};
const LOGIN = 'LOGIN';const LOGOUT = 'LOGOUT';
const authReducer = (state = {authenticated: false}, action) => {  switch(action.type) {    case LOGIN:      return {        authenticated: true      }    case LOGOUT:      return {        authenticated: false      }    default:      return state;  }};
const rootReducer = Redux.combineReducers({   count: counterReducer,  auth: authReducer})
const store = Redux.createStore(rootReducer);

Send Action Data to the Store

const ADDNOTE = 'ADDNOTE';


const notesReducer = (state = 'Initial State', action) => {  switch(action.type) {    case ADD_NOTE:    return action.text

    default:      return state;  }};
const addNoteText = (note) => {  return {    type: ADD_NOTE,    text: note  }

};
const store = Redux.createStore(notesReducer);
console.log(store.getState());store.dispatch(addNoteText('Hello!'));console.log(store.getState());

Use Middleware to Handle Asynchronous Actions

const REQUESTINGDATA = 'REQUESTINGDATA'

const RECEIVEDDATA = 'RECEIVEDDATA'


const requestingData = () => { return {type: REQUESTINGDATA} }const receivedData = (data) => { return {type: RECEIVEDDATA, users: data.users} }
const handleAsync = () => {  return function(dispatch) {    dispatch(requestingData())    setTimeout(function() {      let data = {        users: ['Jeff', 'William', 'Alice']      }     dispatch(receivedData(data))    }, 2500);  }};
const defaultState = {  fetching: false,  users: []};
const asyncDataReducer = (state = defaultState, action) => {  switch(action.type) {    case REQUESTINGDATA:      return {        fetching: true,        users: []      }    case RECEIVEDDATA:      return {        fetching: false,        users: action.users      }    default:      return state;  }};
const store = Redux.createStore(  asyncDataReducer,  Redux.applyMiddleware(ReduxThunk.default));

Write a Counter with Redux

const INCREMENT = "INCREMENT"; 

const DECREMENT = "DECREMENT"; 


const counterReducer = (state = 0, action) => {  switch(action.type) {    case INCREMENT:      return state + 1;
    case DECREMENT:      return state - 1;
    default:      return state;}};
const incAction = () => {  return {    type: INCREMENT  };};
const decAction = () => {  return {    type: DECREMENT  };};
const store = Redux.createStore(counterReducer);

Never Mutate State

const ADDTODO = 'ADDTODO';


// A list of strings representing tasks to do:const todos = [  'Go to the store',  'Clean the house',  'Cook dinner',  'Learn to code',];
const immutableReducer = (state = todos, action) => {  switch(action.type) {    case ADDTODO:            return [...state,action.todo]    default:      return state;  }};
const addToDo = (todo) => {  return {    type: ADDTODO,    todo  }}
const store = Redux.createStore(immutableReducer);

Use the Spread Operator on Arrays

const immutableReducer = (state = ['Do not mutate state!'], action) => {

  switch(action.type) {

    case 'ADDTODO':

     

      return [...state, action.todo]

    default:

      return state;

  }

};


const addToDo = (todo) => {  return {    type: 'ADDTODO',    todo  }}

Remove an Item from an Array

const immutableReducer = (state = [0,1,2,3,4,5], action) => {

  switch(action.type) {

    case 'REMOVE_ITEM':

      const stateCopy = [...state]

      stateCopy.splice(action.index, 1)

      return stateCopy

     default:

      return state;

  }

};


const removeItem = (index) => {  return {    type: 'REMOVE_ITEM',    index  }}
const store = Redux.createStore(immutableReducer);

Copy an Object with Object.assign

const defaultState = {

  user: 'CamperBot',

  status: 'offline',

  friends: '732,982',

  community: 'freeCodeCamp'

};


const immutableReducer = (state = defaultState, action) => {  switch(action.type) {    case 'ONLINE':
    return Object.assign({}, state , {status: 'online',    })    default:      return state;  }};
const wakeUp = () => {  return {    type: 'ONLINE'  }};
const store = Redux.createStore(immutableReducer);

Enjoy this post?

Buy SEMIH a coffee

More from SEMIH