react-redux不产生输出值
我正在遵循来自https://medium.com/@viewflow/full-stack-django-quick-start-with-jwt-auth-and-react-redux-part-ii-be9cf6942957的完整堆栈django-react组装指南。值得注意的是，这个链接是一篇主要文章的三个部分之一。
我想要做的是证明/api/echo响应是有效的。在app.js中，它调用函数this.props.fetchMessage('Hi!');，并且期望状态将被state.message值更新，该值将返回到使用redux connect库的props。
但是，{this.props.message}不会填充，也不会显示在屏幕上。我甚至直接从食谱上抄袭过来：https://github.com/viewflow/cookbook/tree/master/_articles/redux_jwt_auth/frontend
我正在学习React，redux和Django。值得注意的是，我已经检查过了，/api/echo响应正如期进入。(使用浏览器开发人员栏确认)。
为了确保this.props.message被填写，我遗漏了什么？谢谢。
操作/echo.js.js
import { RSAA } from 'redux-api-middleware';
import { withAuth } from '../reducers';
export const ECHO_REQUEST = '@@echo/ECHO_REQUEST';
export const ECHO_SUCCESS = '@@echo/ECHO_SUCCESS';
export const ECHO_FAILURE = '@@echo/ECHO_FAILURE';
export const echo = (message) => ({
[RSAA]: {
endpoint: '/api/echo/',
method: 'POST',
body: JSON.stringify({message: message}),
headers: withAuth({ 'Content-Type': 'application/json' }),
types: [
ECHO_REQUEST, ECHO_SUCCESS, ECHO_FAILURE
]
}
});reducers/echo.js .js
import * as echo from '../actions/echo'
const initialState = {
message: ""
}
export default (state=initialState, action) => {
switch(action.type) {
case echo.ECHO_SUCCESS:
return {
message: action.payload.message
};
default:
return state
}
}
export const serverMessage = (state) => state.message;reducers/index.js
import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
import auth, * as fromAuth from './auth.js'
import echo, * as fromEcho from './echo.js'
export default combineReducers({
auth: auth,
echo: echo,
router: routerReducer
})
export const isAuthenticated = state => fromAuth.isAuthenticated(state.auth)
export const accessToken = state => fromAuth.accessToken(state.auth)
export const isAccessTokenExpired = state => fromAuth.isAccessTokenExpired(state.auth)
export const refreshToken = state => fromAuth.refreshToken(state.auth)
export const isRefreshTokenExpired = state => fromAuth.isRefreshTokenExpired(state.auth)
export const authErrors = state => fromAuth.errors(state.auth)
export const serverMessage = state => fromEcho.serverMessage(state.echo)
export function withAuth(headers={}) {
return (state) => ({
...headers,
'Authorization': `Bearer ${accessToken(state)}`
})
}app.js
这是填充fetchMessage函数的位置。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {echo} from './actions/echo';
import { serverMessage } from './reducers/echo';
class App extends Component {
componentDidMount() {
this.props.fetchMessage('Hi!');
}
render() {
console.log(this.props.message);
return (
<div>
<h2>Welcome to React</h2>
<p>Message: {this.props.message}</p>
</div>
);
}
}
export default connect(
state => ({ message: serverMessage(state)}),
{ fetchMessage: echo }
)(App);回答 2
Stack Overflow用户
发布于 2018-05-29 08:19:24
传递给mapStateToProps的appState对象(您提供给serverMessage选择器函数)不是由单个缩减程序管理的应用程序状态切片。It's the global Redux store state。
您可能需要在reducers/echo.js .js中执行以下操作：
export const serverMessage = (state) => state.echo.message;Stack Overflow用户
发布于 2018-05-29 08:58:58
您的导入import { serverMessage } from './reducers/echo';错误
需要使用根还原器中的选择器import { serverMessage } from './reducers/';只有根还原器保存了子状态的不同部分如何映射的信息。
https://stackoverflow.com/questions/50574659
复制相似问题