Redux State未更新.Redux工具显示为空

Question

大家晚上好。这里的反应超级棒。试图更新我的减速器上的状态，但在我的一生中都不会更新。请让我知道我做错了什么。

下面的代码：

import React from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { fetchCodes,fetchLang } from "../actions";
class CodeDisplay extends React.Component{

componentDidMount(){      
this.props.fetchCodes();        
}
componentDidUpdate(){
this.props.fetchLang();
}
renderCreate(){
return(
<Link to={'/add'} className="ui primary basic button">Add Code</Link>
)       
}
renderTableData() {
return this.props.code.map((c,i) => {
const { id, CodeName, Code, DateAdded } = c //destructuring
return (
<tr key={i}>
<td><i className="keyboard icon"></i></td> 
<td>{id}</td>
<td>
<Link to={`/show/${c.id}`} className="header">
{CodeName}
</Link>
</td>
<td>{Code}</td>
<td>{DateAdded}</td>
<td>
<div className ="ui buttons">
<Link to={`/update/${c.id}`} className="ui button primary">Edit</Link>
<div className ="or"></div>
<Link to={`/delete/${c.id}`} className="ui button negative">Delete</Link>
</div>
</td>              
</tr>
)
})
}
render (){
return (
<div>
{this.renderCreate()}
<table className="ui single line table">
<tbody>
<tr>
<th></th>
<th>ID</th>
<th>Code Name</th>
<th>Code</th>
<th>Date Added</th>
</tr>
{this.renderTableData()}
</tbody>
</table>
</div>
)
}
}
const mapStateToProps = state =>{
return {
code: Object.values(state.code),
lang:state.lang
}
}

我的减速器低于

import _ from 'lodash';
import { 
FETCH_LANG
} from "../actions/types";
export default (state = {}, action) => {
switch (action.type) {
case FETCH_LANG:
return [...state, action.payload];
default:
return state;
}
};

下面的组合减速器：

import { combineReducers } from "redux";
import { reducer as form} from "redux-form";
import CodeReducer from "./CodeReducer";
import LangReducer from "./LangReducer";
export default combineReducers({
code:CodeReducer,
lang: LangReducer,
form:form    
});

index.js如下：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux';
import { createStore, applyMiddleware,compose} from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App.js'
import reducers from './reducers';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducers,
composeEnhancers(applyMiddleware(reduxThunk))
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector('#root')
);

下面的操作创建者：

export const fetchLang = () => async dispatch => {
const response = await api.get('/GetLang');
dispatch({ type: FETCH_LANG, payload: response.data });
};

如有任何帮助，我们将不胜感激！

Answer 1

根据我所知，您缺少一个要传递给connectHOC的mapDispatchToProps对象。这意味着fetchCodes和fetchLang动作创建者没有封装在对dispatch的调用中，也没有作为要在组件中访问的道具注入。

添加一个mapDispatchToProps并在mapStateToProps之后传递给connect。

...
const mapDispatchToProps = { fetchCodes, fetchLang };
export default connect(mapStateToProps, mapDispatchToProps)(CodeDisplay);