How to send component's state as payload to store in React redux

Question

In my application, i am trying to make state available to more than one component, and am making use of react-redux store. one component updates the redux initial-state, while the other component makes use of the updated state.

I have my Redux store set up like so:

wagesAction.js

import{SET_WAGE_TOTAL} from './types';

export const wagesTotal =(totalWages)=>dispatch=>{
 console.log('Action =>',totalWages); // console.log => shows data arrives at this point
 
 dispatch({
    type:SET_WAGE_TOTAL,    
    payload : totalWages
               
 })

   };
  

this here is the reducer with initial values set at 1.5 (wagesReducer.js)

import{SET_WAGE_TOTAL} from '../actions/types';
const initialState = {
   
    value:1.5
}

export default function(state=initialState,action){

    switch(action.type){
        case SET_WAGE_TOTAL:
          
            return{
                ...state,
               wagesTotal :action.payload,
                
            }

            default:
                return state;
}

}


```

In my combined reducer i have the following :

```
********* // other codes
export default combineReducers({
wages : wagesReducer

})

```


And I'm  trying to make use of the redux state in the other component like so :

```
// showWages.js

import React, { Fragment, useRef, useEffect,useCallback, useState } from "react";
import { useDispatch, useSelector } from 'react-redux';

function ShowWages(props) {
const wages =useSelector(state=>state.wages);


return(
<>
{wages.value}
</>

)


}

```

I am relatively new to redux. and am trying to use it in my application. My challenge is that the first component successfully sends the data to the store, but is unable to update the redux state.... I cant figure out where I went wrong?

My plan is to be able to update the store from the first component, and have the redux state available to other component within the application. however, when i try to get the state from the second component i still have 1.5, which is still the initial state.

Answer 1

In the initialState you are storing wage value in value property. And inside the reducer when you are returning new state you had put wagesTotal:action.payload this will not override value property instead it will add wagesTotal . So your final state look like

{
    value:1.5,
    wagesTotal: // action.payload
}

So it should be

return{
    ...state,
    value :action.payload,
}

Update Code:

export default function(state=initialState,action){
    switch(action.type){
        case SET_WAGE_TOTAL:
            return{
               ...state,
               value :action.payload,  
            }
        default:
            return state;
    }
}