javascript React Redux cheatsheet

Posted 2021-05-03

export const FETCH_DATA = "FETCH_DATA";

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

import { FETCH_DATA } from '../actions/types';
  
  const initialState = {
    data: []
  };
  
  export default function (state = initialState, action) {
    switch (action.type) {
  
      case FETCH_DATA:
        return {
          ...state,
          data: action.payload
        };
        
      default:
        return state;
    }
  }

import { connect } from 'react-redux';
import { actionSample } from '../../store/actions/actions';
import { ComponentSample } from '../../components';

const mapStateToProps = state => ({
    dataSample: state.data.dataSample,
 });

 const mapActionToProps = {
    actionSample
};

export default connect(mapStateToProps, mapActionToProps)(ComponentSample);

import { combineReducers } from 'redux';

import data from './reducers';

export default combineReducers({
    data
});

import { FETCH_DATA } from './types';

export const fetchRestaurants = () => async (dispatch, getState) => {
    try {

        const response = await axios.get("/service");
        const data = response.data.data;

        dispatch({
            type: FETCH_DATA,
            payload: data
        });

    } catch (error) {
        console.error(error);
    }
};