Потребитель Redux не передает обновленный реквизит компоненту React - PullRequest
3 голосов
/ 30 октября 2019

redux@6.0.0

Я работаю над добавлением избыточности в приложение React на стороне сервера. Архитектура приложения представляет собой черный ящик, но я успешно настроил редукцию, следуя этому примеру из документации .

Я могу читать данные из хранилища редуксов и отображать их на экране. ,Я могу отправлять действия, которые обновляют магазин. Эти изменения доходят до Context.Consumer (и могут быть проверены в React DevTools), но на этом остановимся. Несмотря на это изменение, значение никогда не передается компоненту после первоначального монтирования.

Я читал здесь, что «99,9% времени» это происходит из-за состояния мутирования . Поэтому я добавил еще одно хранилище со стандартным значением и действием для его обновления:

const ACTIONS = {
    SET_RANDOM_TEST_VALUE: 'SET_RANDOM_TEST_VALUE',
}

const initialState = {
    testValue: 'intial test value', // I now see this typo, but the screenshots are final ?‍♂️
}

export const setRandomTestValue = () => ({
    type: ACTIONS.SET_RANDOM_TEST_VALUE,
})

export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case ACTIONS.SET_RANDOM_TEST_VALUE: {
            return {
                ...state,
                testValue: String(Math.random()).slice(-5),
            }
        }
        default: {
            return state
        }
    }
}

Мой тестовый редуктор добавляется к rootReducer:

import { reducer as testReducer } from './TestStore.redux'

const rootReducer = combineReducers({
    // ...
    __test__: testReducer,
})

Затем значения отображаются накомпонент:

/* Import assets */

const Test = props => {
    console.count('Render count')
    return (
        <div>
            <button onClick={props.setRandomTestValue}>Update value</button>
            <code>{props.testValue}</code>
        </div>
    )
}

export default connect(
    state => ({ testValue: state.__test__.testValue }),
    { setRandomTestValue }
)(Test)

С этой настройкой, кажется, все работает. Консоль регистрирует Render count: 1, и компонент отображает initial test value - все как положено:

A screenshot of the Test component displaying correctly on initial render

Когда вы нажимаете кнопку, действие запускаетсяи хранилище обновляется (как показано здесь в журнале приставки):

A screenshot of the action logged in the console by redux logger

Однако компонент больше не вызывается, а содержимое неизменить:

A screenshot of the action logged in console but no change to the component

Отслеживая его в React DevTools, вы можете увидеть, что Context.Consumer действительно имеет обновленное значение (случайная строка чисел):

A screenshot of the Context.Consumer component in React DevTools with the updated value

^^^ Другое значение, потому что скриншоты трудные.

Таким образом, значение дойдет до потребителя, но этонасколько это возможно. При проверке реквизита компонента Test он по-прежнему имеет начальное значение:

A screenshot of the Test component in React DevTools with stale props.

:sad-trombone:

tl; dr

Где-то в этом проекте произошел разрыв между потребителем хранилища избыточных данных и компонентом, который ожидает обновленных реквизитов. Компонент может прочитать начальное значение из магазина, но не может получать обновления.

Из-за сложности этого проекта я не ищу ответа per se . Мне просто нужно знать, в каком направлении смотреть. Будем благодарны за любые подсказки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...