Redux商店没有更新

Question

I am trying to update the redux store with a list of groupsNames. The axios call inside the action works and there is a response. When I dispatch the payload the redux store doesnt get updated with response data.

FileName: actions/index.js

CODE:

export const getGroups = () => async dispatch => {
  axios.get(url + "groups")
   .then(response => {
     console.log(response.data);
    dispatch({
     type: GET_GROUPS,
      payload: response.data
   })
  },
  function(error) {
    console.log(error)
          }
      );

 };

---

Filename: reducers/groupsReducer.js

CODE:

import _ from 'lodash';
import {
GET_GROUPS,
} from '../actions/types';


export default (state = {}, action) => {
console.log(action.payload);
console.log("inside groupsREducer");
switch (action.payload) {
case GET_GROUPS:
   console.log(action.payload);
   return {...state, ..._.mapKeys(action.payload, 'id')};

default:
  return state;
 }
 }

//mapKeys is a function from lowdadsh that takes an array and returns an object.

---

FileName: reducers/index.js

CODE:

import { combineReducers } from 'redux';
import authReducer from './authReducer';
import { reducer as formReducer } from 'redux-form';
import postsReducer from './postsReducer';
import groupsReducer from './groupsReducer';

export default combineReducers ({
 auth: authReducer,
 form: formReducer,
 posts: postsReducer,
 groups: groupsReducer,
 });

---

FileName: GroupList.js

CODE:

  import React from "react";     
  import { connect } from "react-redux";
  import { getGroups } from '../../actions';

  class GroupList extends React.Component {

   componentDidMount() {
     this.props.getGroups();
    }

    render() {
     return <div>
       <h1>GroupList</h1>
       </div>;
     }
    }


   export default connect(null, { getGroups })(GroupList);

---

FileName: App.js

CODE:

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose} from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
import Landing  from './components/Landing';


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducers,
  composeEnhancers(applyMiddleware(reduxThunk))
);

ReactDOM.render(
  <Provider store={store}>
    <Landing />
  </Provider>,
 document.querySelector('#root')
);```






Ive connected to ReduxDevToolsExtension in chrome and when i check the state in there, it shows empty.

Answer 1

Your are using the wrong argument for your switch-case.

Replace switch (action.payload) with switch (action.type)