我正在遵循来自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);
发布于 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;
发布于 2018-05-29 08:58:58
您的导入import { serverMessage } from './reducers/echo';
错误
需要使用根还原器中的选择器import { serverMessage } from './reducers/';
只有根还原器保存了子状态的不同部分如何映射的信息。
https://stackoverflow.com/questions/50574659
复制相似问题