React Redux Steps

React Redux Steps:

1. Install Redux and React-Redux using the following command:

Commmand: npm install --save redux react-

2. Create actions types in a seperate file (eg: actionTypes.js)

export const ADD_INGREDIENT = 'ADD_INGREDIENT';
export const REMOVE_INGREDIENT = 'REMOVE_INGREDIENT';
export const UPDATE_INITIAL_INGREDIENTS = 'UPDATE_INITIAL_INGREDIENTS';
export const FETCH_INGREDIENTS_FAILED = 'FETCH_INGREDIENTS_FAILED';

3. Create actions in a file (eg: action.js)

import * as actionTypes from './actionsTypes';

export const addIngredient = (type) => {
return {
  type: actionTypes.ADD_INGREDIENT,
  ingredientType: type
};
};

export const removeIngredient = (type) => {
return {
  type: actionTypes.REMOVE_INGREDIENT,
  ingredientType: type
};
};

export const updateInitialIngredients = (ingredients) => {
return {
  type: actionTypes.UPDATE_INITIAL_INGREDIENTS,
  ingredients: ingredients
};
};

export const fetchIngredientsFailed = () => {
return {
  type: actionTypes.FETCH_INGREDIENTS_FAILED
};
};

4. Create reducer (eg: reducer.js)

const initialState = {
totalPrice: 0
};

const createBurgerReducer = (state = initialState, action) => {
switch (action.type) {
  case actionTypes.ADD_INGREDIENT:
return {
...state,
totalPrice: newPrice
}
  case actionTypes.REMOVE_INGREDIENT:
return {
...state,
totalPrice: newPrice
}
  case actionTypes.UPDATE_INITIAL_INGREDIENTS:
return {
...state,
ingredients: action.ingredients,
error: false
};
  case actionTypes.FETCH_INGREDIENTS_FAILED:
return {
...state,
error: true
};
  default:
return state;
}
};

export default createBurgerReducer;

6. Connect the react component to the store

import { connect } from 'react-redux';
import * as actions from './actions';

class BurgerBuilder extends Component {
componentDidMount() {
  if (!this.props.ingredients) {
 
// Dispatching an action.

this.props.addIngredient();
  }
}
}

const mapStateToProps = state => {
return {
  ingredients: state.burger.ingredients,
  totalPrice: state.burger.totalPrice,
  error: state.burger.error
};
};

const mapDispatchToProps = dispatch => {
return {
  addIngredient: () => dispatch(actions.addIngredient())
};
};

export default connect(mapStateToProps, mapDispatchToProps)(BurgerBuilder);

7. Connect the store, reducers in the index.js

import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';

const rootReducer = combineReducers({
burger: createBurgerReducer
});

const store = createStore(rootReducer);

const app = (
<Provider store={store}>
  <BrowserRouter>
<App />
  </BrowserRouter>
</Provider>
);

ReactDOM.render(app, document.getElementById('root'));

8. For making asynchronus calls in Redux install thunk using the following command:

npm install --save redux-thunk

9. Import thunk in index.js

import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));

9. Create a action in actions.js which makes async calls:

export const initIngredients = () => {
return dispatch => {
  axios.get('https://react-my-burger-8eda4.firebaseio.com/Ingredients.json')
.then(response => {
dispatch(updateInitialIngredients(response.data));
})
.catch(error => {
dispatch(fetchIngredientsFailed());
});
};
};