CODEWITHSUNDEEP
reactjsreduxreducers
Heshan
Heshan

Reputation: 918

How reducers update the store

I am new to Redux and i am finding some problems with understanding concept of reducers, I can see many examples showing it takes current state and return updated state, My question is how it updates the Store by returning the new state ( i am finding difficult to understand the mechanism ), can some one please explain me .

Upvotes: 1

Views: 1575

Answers (3)

Heshan
Heshan

Reputation: 918

Actually this is the part that i was missing about reducers,The part i didnt catch was reducers out put has to be assigned to store property

let Action={type:'SET_VISIBILITY_FILTER',text: 'test pay load'}

//Invoking Reducer
let store=todoApp({},Action)

//Reducer
function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        message: action.text
      })
    default:
      return state
  }
}

Upvotes: 0

Hemantkumar Gaikwad
Hemantkumar Gaikwad

Reputation: 721

The Redux store is nothing but just an object holding all states of the application. The reducer is the only way to update the store.

The reducer is a pure function with takes an old state and returns a new state. In reducer what we need to do is that we just provide the old state which is store currently having and then the new state which we are going to change state. You can refer this for detailed explanation for reduce function.

In simple words, reducer takes existing state object updates some property passed through reducer function and returns new object state.

Following link has better explanation. This is very nice blog how to create your own redux. You will get exactly what happens in the redux store.

https://www.jamasoftware.com/blog/lets-write-redux/

Upvotes: 5

Rajan Lagah
Rajan Lagah

Reputation: 2528

this is not my image

this is image that i found very helpfull when i was learning the same concept.

Dispatch

When you dispatch any function it goes to all reducers and if the type of dispatch matches it will change the state of that reducer.

 functionName:()=>(dispatch)({type:'some-thing-to-match',payload})


Reducers That handle state change.

Store Combination of all the reducers (root reducer).

const store = combineReducers({
Reducer1:r1,
Reducer2:r2,
Reducer3:r3
})

For example take the dispatch function in TodoList that matches in r1 and changes its state.Then by connect from 'react-redux' we will connect that reducers state to TodoList.

var mapStateToProps = state=>{
 return:{
 r1:r1
}
}

then react will react to any change in state. If state of r1 is changed then it will update that component.

Your question how it update store by returning state. Your reducer will get store(state) and function as input and change the store according to function and return the state to store.
Then we can connect our component to that store to catch any change in it.

As we can see in image. Dispatch will change the store's state.Then you can import(connect) that reducer to see the changes in your component.(here TodoItem is that component)

Upvotes: 4

Related Questions