Redux 商店没有更新

Question

我正在尝试使用 groupNames 列表更新 redux 存储。动作中的 axios 调用有效并且有响应。当我分派有效负载时，redux 存储不会更新响应数据。

文件名：actions/index.js

代码：

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)
          }
      );

 };

文件名：reducers/groupsReducer.js

代码：

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 是 lowdadsh 的一个函数，它接受一个数组和 returns 一个对象。

文件名：reducers/index.js

代码：

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,
 });

文件名：GroupList.js

代码：

  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);

文件名：App.js

代码：

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

您为 switch-case 使用了错误的参数。

将switch (action.payload)替换为switch (action.type)

Redux 商店没有更新

Redux store isn't updating

javascript

reactjs

redux

redux-thunk

react-redux