[英]react-redux Reducer doesn't pass the object to the store
I have an issue and I could really use some help. 我有一个问题,我真的可以使用一些帮助。 I am very new to react and react-redux, so the solution is probably simpler than I might think(I hope so).
我对React和react-redux非常陌生,因此解决方案可能比我想的要简单(我希望如此)。 I have a simple site, that contains Links (from react-router) with names of recipes:
我有一个简单的网站,其中包含带有配方名称的链接(来自react-router):
class Posts extends Component {
componentWillMount() {
this.props.fetchPosts();
}
componentWillReceiveProps(nextProps) {
if (nextProps.newPost) {
this.props.posts.unshift(nextProps.newPost);
}
}
render() {
const postItems = this.props.posts.map(recipe => (
<div key={recipe.id}>
<Link to={`/recipe/id/${recipe.id}`}>{recipe.name}</Link>
</div>
));
return (
<Router>
<div>
<h1>Well yeah</h1>
{postItems}
<Route path={`/recipe/id/:recipeId`} component={Post}/>
</div>
</Router>
);
}
}
Posts.propTypes = {
fetchPosts: PropTypes.func.isRequired,
posts: PropTypes.array.isRequired,
newPost: PropTypes.object,
};
const mapStateToProps = state => ({
posts: state.posts.items,
newPost: state.posts.item,
});
export default connect(mapStateToProps, {fetchPosts})(Posts);
Now, I also have a component Post, which is supposed to be a single recipe. 现在,我还有一个组件Post,应该是一个简单的配方。
class Post extends Component {
static propTypes = {};
componentDidMount() {
this.props.fetch();
}
render() {
return (
<div>Hello{this.props.recipe.name}</div>
);
}
}
Post.propTypes = {
fetch: PropTypes.func.isRequired,
recipe: PropTypes.object
};
const mapDispatchToProps = (dispatch, ownProps) => ({
fetch: () => {
dispatch(fetchPostById(ownProps.location.pathname))
}
});
const mapStateToProps = state => ({
recipe: state.posts.recipe
});
export default connect(mapStateToProps, mapDispatchToProps)(Post);
Regardless of what I do, I can't seem to make it work properly. 无论我做什么,我似乎都无法使其正常运行。 I have an action that fetches the single recipe(I have no problem fetching the list of recipes) and then pass it to the reducer.
我有一个操作,可以提取单个配方(获取配方列表没有问题),然后将其传递给减速器。 However, when I put console.log(action.payload) in the case in the reducer, it shows the Object containing the recipe in the console just fine.
但是,当我将console.log(action.payload)放入减速器的情况下,它可以很好地显示控制台中包含配方的对象。 But when I put {this.props.recipe.name} in Post.js I get an error That this.props.recipe is undefined.
但是,当我将{this.props.recipe.name}放入Post.js时,我得到一个错误,指出this.props.recipe是未定义的。 Any help is very appreciated.
任何帮助都非常感谢。 To be sure, I will also post the code of the reducer and the actions.
可以肯定的是,我还将发布reducer的代码和操作。
Reducer: 减速器:
const initialState = {
items: [],
item: {},
recipe:{}
};
export default function (state = initialState, action) {
switch (action.type) {
case FETCH_RECIPES:
return {
...state,
items: action.payload
};
case NEW_RECIPE:
return {
...state,
item: action.payload
};
case FETCH_RECIPE_ID:
return{
...state,
recipe:action.payload
};
default:
return state;
}
}
Actions: 动作:
export const fetchPosts = () => dispatch => {
fetch('http://192.168.1.3:6996/recipe')
.then(res => res.json())
.then(recipes => dispatch({
type: FETCH_RECIPES,
payload: recipes
}));
};
export const createPost = (postData) => dispatch => {
fetch('http://192.168.1.3:6996/recipe', {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(postData)
}).then(res => res.json()).then(recipe => dispatch({
type: NEW_RECIPE,
payload: recipe
}))
};
export const fetchPostById= (id) => dispatch => {
fetch('http://192.168.1.3:6996' + id)
.then(recipe => recipe.json())
.then(recipe => dispatch({
type: FETCH_RECIPE_ID,
payload: recipe
}))
};
Main reducer: 主减速器:
import { combineReducers } from 'redux'
import postReducer from './postReducer'
export default combineReducers({
posts: postReducer
});
after switching off WebStorm for the night, the site fired up the next morning and worked somewhat fine. 在晚上关闭WebStorm之后,该网站在第二天早晨启动,并且运行情况还不错。 I have a problem with the react-router part sill, but I will post different question, so I don't break any rules.
我对react-router的部分门槛有疑问,但是我将发布其他问题,因此我不会违反任何规则。 Thanks a lot!
非常感谢!
In this line recipe: state.posts.recipe
you are implying that there is a posts object in your state that holds your recipe, but in the reducer, I don't see any posts object in your state. 在以下代码行中
recipe: state.posts.recipe
表示您的状态中存在一个可以保存您的食谱的posts对象,但是在reducer中,我看不到您状态中的任何posts对象。 try changing it to this line recipe: state.recipe
尝试将其更改为以下行
recipe: state.recipe
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.