[英]ReactJS: Redux state is not changing
I'm just starting with React and Redux and stumbled upon something I can't figure out by myself - I think that Redux state is not changing and it's causing (some of) errors. 我只是从React和Redux开始,偶然发现了一些我自己无法解决的问题-我认为 Redux状态没有改变,并且正在引起(某些)错误。 I'm checking state with use of remote-redux-devtools@0.5.0.
我正在使用remote-redux-devtools@0.5.0检查状态。 My code:
我的代码:
Categories.js: Categories.js:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getCategories } from '../../actions/categories';
export class Categories extends Component {
static propTypes = {
categories: PropTypes.array.isRequired
};
componentDidMount() {
this.props.getCategories();
}
render() {
return (
<div>
Placeholder for categories.
</div>
)
}
}
const mapStateToProps = state => ({
categories: state.categories.categories
});
export default connect(mapStateToProps, { getCategories })(Categories);
../../actions/categories.js: ../../actions/categories.js:
import axios from "axios";
import { CATEGORIES_GET } from "./types";
export const getCategories = () => dispatch => {
return axios
.get("/api/notes/categories/")
.then(res => {
dispatch({
type: CATEGORIES_GET,
payload: res.data
});
})
.catch(err => console.log(err));
};
reducers/categories.js: reducers / categories.js:
import { CATEGORIES_GET } from '../actions/types.js';
const initialState = {
categories: []
};
export default function (state = initialState, action) {
switch (action.type) {
case CATEGORIES_GET:
return {
...state,
categories: action.payload
};
default:
return state;
}
}
store.js: store.js:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware)));
export default store;
reducers/index.js reducers / index.js
import { combineReducers } from "redux";
import categories from './categories';
export default combineReducers({
categories,
}); });
Using remote-redux-devtools, I've never seen anything in my state. 使用remote-redux-devtools,我从未见过任何状态。 Currently this code above gives me 3 errors, two of them being
目前,以上这段代码给了我3个错误,其中两个是
this.props.getCategories is not a function
this.props.getCategories不是一个函数
My guess is that because there is some issue with Categories
class, it's not passing anything to state and it could be root cause of errors. 我的猜测是,由于
Categories
类存在一些问题,因此没有将任何内容传递给状态,这可能是错误的根本原因。 I had one more error, connected to Categories
not being called with attributes, but for debug purposes I put empty array there - one error dissapeared, but that's it. 我还有一个错误,没有使用属性调用
Categories
,但是出于调试目的,我在其中放置了空数组-一个错误消失了,仅此而已。 I've also tried adding constructor to Categories
and called super()
, but did not help also. 我也尝试将构造函数添加到
Categories
并称为super()
,但也没有帮助。
I believe your issue is that you're exporting your Categories
class twice, once connected, the other not. 我相信您的问题是,您导出了
Categories
类两次,一次连接成功,另一次没有。
If you remove export from export class Categories extends Component
, does it work as expected? 如果从
export class Categories extends Component
删除导出 ,则export class Categories extends Component
会按预期工作吗?
When you're mapping the state in a component, you must access the desired variable through a reducer. 在组件中映射状态时,必须通过化简器访问所需的变量。
So instead of: 所以代替:
const mapStateToProps = state => ({
categories: state.categories
});
You must use: 您必须使用:
const mapStateToProps = state => ({
categories: state.categories.categories
});
Your props don't have getCategories method, because you didn't pass it as a function to connect
. 您的道具没有getCategories方法,因为您没有将它作为
connect
函数传递。
A better approach is to define only the action code in your actions file and then use mapDispatchToProps
. 更好的方法是仅在操作文件中定义操作代码,然后使用
mapDispatchToProps
。
../../actions/categories.js ../../actions/categories.js
import axios from "axios";
export const getCategories = () => {
axios
.get("/api/notes/categories/")
.then(res => res.data);
})
.catch(err => console.log(err));
};
Categories.js Categories.js
import { getCategories } from '../../actions/categories'
import { CATEGORIES_GET } from "./types";
const mapDispatchToProps = dispatch => {
return {
getCategories: () => dispatch(() => { type: CATEGORIES_GET, payload: getCategories() }),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Categories);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.