Redux商店未更新

时间:2019-06-24 18:48:13

标签: javascript reactjs redux react-redux redux-thunk

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

文件名:actions / index.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;
 }
 }

文件名:reducers / groupsReducer.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,
 });

// mapKeys是lowdadsh中的一个函数,它接受一个数组并返回一个对象。


文件名:reducers / index.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);

文件名:GroupList.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.

文件名:App.js

代码:

public class Base {

1 个答案:

答案 0 :(得分:0)

您为切换用例使用了错误的参数。

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

相关问题