In React Native and Redux, I have a <NavigationCardStack/>
as a root component. And every time state has been updated, the redux-logger updates correctly with the next/new state.
And after the state change, when newly updated state is console logged in a child component, it doesn't console log the updated state but rather console logs the initial state (in the child component childPage.js
and logging: render(){ console.log(this.props.state) return(...) ...
).
Could it be that I am hooked up to Redux incorrectly or missing something? Because, everything seem to work perfectly fine and makes sense.
Thank you in advance!
Here are some snippets of my code:
This is my reducer and the child component would just log the initialState here even though other properties have been added and updated:
const initialState = {
meetUp: false,
}
function itemReducer(state = initialState, action) {
switch(action.type) {
case ITEM_QUANTITY:
return {
...state,
quantity: action.quantity
}
case ITEM_PRICE:
return {
...state,
price: action.price
}
case ITEM_MEET_UP:
return {
...state,
meetUp: action.meetUp
}
default:
return state
}
}
export default itemReducer
And connected to the root component like so:
function mapStateToProps(state) {
return {
itemInfo: state.itemReducer,
...
}
}
export default connect(
mapStateToProps,
{
itemQuantity: (value) => itemQuantity(value),
itemPrice: (value) => itemPrice(value),
itemMeetUp: (value) => itemMeetUp(value),
}
)(NavigationRoot)
With following actions:
export function itemMeetUp(value) {
return {
type: ITEM_MEET_UP,
meetUp: value
}
}
export function itemQuantity(value) {
return {
type: ITEM_QUANTITY,
quantity: value
}
}
export function itemPrice(value) {
return {
type: ITEM_PRICE,
price: value
}
}
state={this.props} represent the state and how it is supposed to be passed down to child components
_renderScene (props) {
const { route } = props.scene
return (
<route.component _handleNavigate={this._handleNavigate.bind(this)} state={this.props}/>
)
}
<NavigationCardStack
renderScene={this._renderScene}
...
/>
Could this issue be related? It seems similar in that NavigationCardStack
won't update even though the redux state changes, and redux-logger
logs the change. I can't tell from your code sample, but one way to test this might be to connect
the children or one child directly to your redux store instead of having NavigationCardStack
pass the store state in as props? That github issue above also has some hacky workarounds, but I'm not very familiar with react-native so I can't be much help there.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With