Redux reducer function not working. State remains undefined-CodePudding

I'm trying to make a social media app and I wanted to use redux and this is the first time I'm working with redux. It was working fine before I added redux to it. The actions are working and I'm able to fetch and post data from my firebase realtime-database but the state is not updating. Data state shows undefined but the loading state is changing. I think something is wrong in my reducer function.

This is the reducer function that I wrote

import * as actionTypes from '../actions/actionTypes';

const initialState = {
    Data: [],
    loading: false
}

const reducer = (state = initialState, action) => { 
    switch(action.type){
     
        case actionTypes.New_Post_Error: return {
          ...state,
          loading:false
        }

        case actionTypes.New_Post_Success: return {
         ...state,
         loading: false,
         Data: state.Data.concat(action.postData),
        }


        case actionTypes.Fetch_Post_Start: return {
            ...state,
            loading:true
          }

        case actionTypes.Fetch_Post_Error: return {
            ...state,
            loading:false
          }
  
          case actionTypes.Fetch_Post_Success: return {
           ...state,
           loading: false,
           Data: action.postData
          }

     default: return state;
 }
}

export default reducer;

This file contains all the actions

import axios from '../../axios-comments';
import * as actionTypes from './actionTypes';


export const NewPostSuccess = (id, postData) => {
    return {
        type: actionTypes.New_Post_Success,
        postId: id,
        payload: postData
    }
}

export const NewPostError = (error) => {
    return {
        type: actionTypes.New_Post_Error,
        error: error
    }
}


export const NewPost = (postData) => {
  
          return (dispatch) => {
           axios.post('/Data.json', postData)
           .then(response => {
               console.log(response.data);
               dispatch(NewPostSuccess(response.data.name, postData));
           })
           .catch(error => {
               dispatch(NewPostError(error));
           })
          }
  }


  export const FetchPostStart = () => {
    return {
        type: actionTypes.Fetch_Post_Start
    };
};

  export const FetchPostSuccess = (fetchedData) => {
    return {
        type: actionTypes.Fetch_Post_Success,
        payload: fetchedData
    }
}

export const FetchPostError = (error) => {
    return {
        type: actionTypes.Fetch_Post_Error,
        error: error
    }
}
  
export const FetchPost = () => {
    return dispatch => {
        dispatch(FetchPostStart());
        axios.get('/Data.json')
        .then(response => {
           const fetchedData = [];
    
           for(let key in response.data){
                   fetchedData.push({
                   ...response.data[key],
                   id: key
               });
           }
           dispatch(FetchPostSuccess(fetchedData));
        })
    
        .catch(error => {
            dispatch(FetchPostError(error));
        });
    }
}

This is the index.js

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;


const store = createStore(reducer, composeEnhancers(
  applyMiddleware(thunk)));

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

CodePudding user response：

You are retrieving the wrong action properties.
Try to refactor your NewPostSuccess and FetchPostSuccess functions like this

export const NewPostSuccess = (id, postData) => {
    return {
        type: actionTypes.New_Post_Success,
        payload: {
            data: postData,
            id: id 
        }
    }
}

export const FetchPostSuccess = (fetchedData) => {
    return {
        type: actionTypes.Fetch_Post_Success,
        payload: fetchedData
    }
}

Then, adjust your reducer:

import * as actionTypes from '../actions/actionTypes';

const initialState = {
  Data: [],
  loading: false,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.New_Post_Error:
      return {
        ...state,
        loading: false,
      };

    case actionTypes.New_Post_Success:
      return {
        ...state,
        loading: false,
        Data: [...state.Data, action.payload.data],
      };

    case actionTypes.Fetch_Post_Start:
      return {
        ...state,
        loading: true,
      };

    case actionTypes.Fetch_Post_Error:
      return {
        ...state,
        loading: false,
      };

    case actionTypes.Fetch_Post_Success:
      return {
        ...state,
        loading: false,
        Data: action.payload,
      };

    default:
      return state;
  }
};

export default reducer;