When should I add Redux to a React app?

Solution 1:

React is a UI framework that takes care of updating the UI in response to the “source of truth” that is usually described as a state “owned” by some component. Thinking in React describes the React state ownership concept very well, and I strongly suggest you go through it.

This state ownership model works well when the state is hierarchical and more or less matches the component structure. This way the state gets “spread out” across many components, and the app is easy to understand.

However sometimes distant parts of the app want to have access to the same state, for example, if you cache fetched data and want to consistently update it everywhere at the same time. In this case, if you follow the React model, you’ll end up with a bunch of very large components at the top of the component tree that pass a myriad of props down through some intermediate components that don’t use them, just to reach a few leaf components that actually care about that data.

When you find yourself in this situation, you can (but don’t have to) use Redux to “extract” this state management logic from the top-level components into separate functions called “reducers”, and “connect” the leaf components that care about that state directly to it instead of passing the props through the whole app. If you don’t have this problem yet, you probably don’t need Redux.

Finally, note that Redux is not a definitive solution to this problem. There are many other ways to manage your local state outside the React components—for example, some people who didn’t like Redux are happy with MobX. I would suggest you to first get a firm understanding of React state model, and then evaluate different solutions independently, and build small apps with them to get a sense of their strengths and weaknesses.

(This answer is inspired by Pete Hunt’s react-howto guide, I suggest you to read it as well.)

Solution 2:

I've found that the ideal path for adding Redux to an application/stack is to wait until after you/app/team are feeling the pains that it solves. Once you start seeing long chains of props building up and being passed down through multiple levels of components or your finding yourself orchestrating complex state manipulations/reads, that could be a sign that your app may benefit from introducing Redux et al.

I recommend taking an app that you've already built with "just React" and see how Redux might fit into it. See if you can gracefully introduce it by plucking out one piece of state or set of "actions" at a time. Refactor towards it, without getting hung up on a big bang rewrite of your app. If you're still having trouble seeing where it might add value, then that could be a sign that your app is either not large or complex enough to merit something like Redux on top of React.

If you haven't come across it yet, Dan (answered above) has a great short-video series that walks through Redux on a more fundamental level. I highly suggest spending some time absorbing pieces of it: https://egghead.io/series/getting-started-with-redux

Redux also has some pretty great docs. Especially explaining a lot of the "why" such as http://redux.js.org/docs/introduction/ThreePrinciples.html

Solution 3:

I have prepared this document to understand Redux. Hope this clears your doubt.

-------------------------- REDUX TUTORIAL ----------------------

ACTIONS- Actions are payloads of information that send data from your application to the store. They are the only source of information from the store. You can send them only using store.dispatch().

   Example-
const  ADD_TODO = 'ADD_TODO'

{
   type:ADD_TODO,
   text: 'Build my first redux app'
}

Actions are plain javascript object. Action must have a [ type ] property that indicates the type of action being performed. The type should be defined as a string constant.

ACTION CREAToRS----- ---------------- ---- Action creators are exactly the function that creates action It is easy to conflate the terms - action and action creator. In redux action, creator returns an action.

function addToDo(text) {
   return {
    type: ADD_TODO,
    text    
   }
}

to initialte dispatch pass the result to the dispatch() function.

dispatch(addToDo(text));
dispatch(completeToDo(index))

Alternatively, you can create a bound action creator that automatically dispatches.

cosnt boundAddTodO = text => dispatch(addToDo(text));

now you can directly called it

boundaddTodO(text);

The dispatch() functionn can be directly accessed from store.dispatch(). but we access it using a helper connect() method.

Actions.js.....................

Actions...........

exports cosnt ADD_TODO = 'ADD_TODO';
exports cosnt TOGGLE_TODO = 'TOGGLE_TODO'

Actions Creators

export function addToDO(text){ return { type: ADD_TODO, text } }

.........................REDUCERS..................................

Reducers specify how the applications state changes in response to actions sent to the store.

Designing the state shap

In redux all the application state is store in single object. You have to store some data as well as some state.

{ visibilityFilter: 'SHOW_ALL', todos: [ { text: 'Consider using redux', completed: true }, { text: 'Kepp all the state in single tree' } ] }

Handling Actions ---------------- the reducers are the pure functions that take the previous state and action, and return a new state.

(previousState, action) => newState

We will start by specifying the initial state. Redux will call our reducers with an undefined state for the first time. this is our chance to return the state of our app.

import  { visiblilityFilters } from './actions';
const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todo: []
}

function todoApp(state, action){
    if(typeof state == 'undefined'){
        return initialState;
    }

    // dont handle other cases as of now.
    return state;
}

you can do the same using ES6 way of handling the JS

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

................................. STORE...................................

The store is a object that brings them together. the store has following responsbility

hold application state
allow access to state via getState()
Allow state to be updated via dispatch()
Register listerneres via suscriber(listener)

Note. use combineReducers() to combine several reducers into one.

const store = createStore(todoapp); // the todoapp are the reducers