的动作/ echo.js

Question

我跟随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

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
        ]
    }
});

减速器/ echo.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;

减速器/ 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);

Answer 1

传递给appState的{{1}}对象（您提供给mapStateToProps选择器函数）不是由单个reducer管理的应用程序状态片段。 It's the global Redux store state

你可能想要在reducers / echo.js中使用它：

serverMessage

Answer 2

您导入错误import { serverMessage } from './reducers/echo';

需要使用root reducer中的选择器import { serverMessage } from './reducers/';只有root reducer可以保存子状态的不同部分的映射信息。

react-redux不产生输出值

的动作/ echo.js

减速器/ echo.js

减速器/ index.js

app.js

2 个答案: