Реакция-редукция не дает выходного значения - PullRequest
Новая
       4

Реакция-редукция не дает выходного значения

0 голосов
/ 29 мая 2018

Я следую полному стеку руководства по сборке django-Reaction от https://medium.com/@viewflow/full-stack-django-quick-start-with-jwt-auth-and-react-redux-part-ii-be9cf6942957. Обратите внимание, эта ссылка является одной из трех частей основной статьи.

Что я пытаюсь сделатьэто доказать, что /api/echo ответ работает.в app.js она вызывает функцию this.props.fetchMessage('Hi!');, и ожидается, что состояние будет обновлено значением state.message, которое вернется к реквизиту с использованием библиотеки redux connect.

Однако{this.props.message} не заполняется и не отображается на экране.Я даже скопировал его прямо из кулинарной книги здесь: https://github.com/viewflow/cookbook/tree/master/_articles/redux_jwt_auth/frontend

Я пытаюсь выучить React, Redux и Django.Следует отметить, что я проверил, и ответ / api / echo приходит, как и ожидалось.(используя панель разработчика браузера для подтверждения).

Чего мне не хватает, чтобы убедиться, что this.props.message заполняется?Спасибо.

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

redurs / 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;

redurs / 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 ]

0 голосов
/ 29 мая 2018

Вы неправильно импортировали import { serverMessage } from './reducers/echo';

Необходимо использовать селектор из корневого редуктора import { serverMessage } from './reducers/'; Только корневой редуктор хранит информацию о том, как отображаются разные части подсостояния.

0 голосов
/ 29 мая 2018

объект appState, переданный mapStateToProps, который вы предоставляете своей функции выбора serverMessage, не является частью состояния приложения, управляемой одним редуктором. Это глобальное состояние хранилища Redux .

вы, вероятно, захотите это в redurs / echo.js: 

export const serverMessage = (state) => state.echo.message;
...