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
- все как положено:
Когда вы нажимаете кнопку, действие запускаетсяи хранилище обновляется (как показано здесь в журнале приставки):
Однако компонент больше не вызывается, а содержимое неизменить:
Отслеживая его в React DevTools, вы можете увидеть, что Context.Consumer
действительно имеет обновленное значение (случайная строка чисел):
^^^ Другое значение, потому что скриншоты трудные.
Таким образом, значение дойдет до потребителя, но этонасколько это возможно. При проверке реквизита компонента Test
он по-прежнему имеет начальное значение:
:sad-trombone:
tl; dr
Где-то в этом проекте произошел разрыв между потребителем хранилища избыточных данных и компонентом, который ожидает обновленных реквизитов. Компонент может прочитать начальное значение из магазина, но не может получать обновления.
Из-за сложности этого проекта я не ищу ответа per se . Мне просто нужно знать, в каком направлении смотреть. Будем благодарны за любые подсказки.