CODEWITHSUNDEEP
reactjsreact-nativereact-redux
TIMBERings
TIMBERings

Reputation: 768

Component not updating after action is dispatched - react-redux

I'm using react-native and am having an issue where my action is being dispatched and the reducer is modifying the state, however my component is not re-rendering. My reducer is using the spread operator to create a new object. It looks like mapStateToProps is not being called again after the store is updated. I'm unsure what I'm missing.

Creating the provier

class App extends React.Component {
  render() {
    return (
      <Provider store={createStore(rootReducer, middleware)}>
        <View style={styles.container}>
          <DeckListScreen />
        </View>
      </Provider>
    );
  }
}

Connecting the component to the provider

class DeckListScreen extends React.Component {
  componentDidMount() {
    this.props.dispatch(handleInitialData())
  }

  render() {
    return(
      <View>
        <Text>{JSON.stringify(this.props.decks, null, 2)}</Text>
      </View
    )
  }
}
function mapStateToProps({decks}) {
  console.log('mapStateToProps - decks:', decks)
  return {
    decks: decks,
    loading: Object.keys(decks).length === 0 ? true : false
  }
}

export default connect(mapStateToProps)(DeckListScreen)

Reducer that returns a new object

export default function decks(state = {}, action) {
  switch(action.type) {
    case GET_DECKS:
      const { decks } = action
      return {
          ...state,
          ...decks
      }
    default:
      return state
  }
}

Here is the console output

Running application on iPhone.
mapStateToProps - decks: Object {}
mapStateToProps - decks: Object {}

ACTION TYPE:
GET_DECKS

OLD STATE:
Object {
  "decks": Object {},
}

ACTION:
Object {
  "decks": Object {
    "JavaScript": Object {
      "questions": Array [
        Object {
          "answer": "The combination of a function and the lexical environment within which that function was declared.",
          "question": "What is a closure?",
        },
      ],
      "title": "JavaScript",
    },
    "React": Object {
      "questions": Array [
        Object {
          "answer": "A library for managing user interfaces",
          "question": "What is React?",
        },
        Object {
          "answer": "The componentDidMount lifecycle event",
          "question": "Where do you make Ajax requests in React?",
        },
      ],
      "title": "React",
    },
  },
  "type": "GET_DECKS",
}

NEW STATE:  
Object {
  "decks": Object {
    "JavaScript": Object {
      "questions": Array [
        Object {
          "answer": "The combination of a function and the lexical environment within which that function was declared.",
          "question": "What is a closure?",
        },
      ],
      "title": "JavaScript",
    },
    "React": Object {
      "questions": Array [
        Object {
          "answer": "A library for managing user interfaces",
          "question": "What is React?",
        },
        Object {
          "answer": "The componentDidMount lifecycle event",
          "question": "Where do you make Ajax requests in React?",
        },
      ],
      "title": "React",
    },
  },
}

Upvotes: 0

Views: 110

Answers (1)

Ryan Castner
Ryan Castner

Reputation: 1054

createStore(rootReducer, middleware) needs to be pulled into a separate variable above App.js. Every time App component re-renders a new store is created which reverts your reducer state.

Upvotes: 1

Related Questions