freeCodeCamp/curriculum/challenges/en/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.en.md

id, title, challengeType, isRequired

id	title	challengeType	isRequired
5a24c314108439a4d4036141	Getting Started with React Redux	6	false

Description

This series of challenges introduces how to use Redux with React. First, here's a review of some of the key principles of each technology. React is a view library that you provide with data, then it renders the view in an efficient, predictable way. Redux is a state management framework that you can use to simplify the management of your application's state. Typically, in a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly from React components, which then trigger store updates. Although React components can manage their own state locally, when you have a complex app, it's generally better to keep the app state in a single location with Redux. There are exceptions when individual components may have local state specific only to them. Finally, because Redux is not designed to work with React out of the box, you need to use the react-redux package. It provides a way for you to pass Redux state and dispatch to your React components as props. Over the next few challenges, first, you'll create a simple React component which allows you to input new text messages. These are added to an array that's displayed in the view. This should be a nice review of what you learned in the React lessons. Next, you'll create a Redux store and actions that manage the state of the messages array. Finally, you'll use react-redux to connect the Redux store with your component, thereby extracting the local state into the Redux store.

Instructions

Start with a DisplayMessages component. Add a constructor to this component and initialize it with a state that has two properties: input, that's set to an empty string, and messages, that's set to an empty array.

Tests

- text: The <code>DisplayMessages</code> component should render an empty <code>div</code> element.
  testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find(''div'').text() === '''' })(), ''The <code>DisplayMessages</code> component should render an empty <code>div</code> element.'');'
- text: 'The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.'
  testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput(''index'').replace(/\s/g,''''); return noWhiteSpace.includes(''constructor(props)'') && noWhiteSpace.includes(''super(props''); })(), ''The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.'');'
- text: 'The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.'
  testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === ''object'' && initialState.input === '''' && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), ''The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.'');'

Challenge Seed

class DisplayMessages extends React.Component {
  // change code below this line

  // change code above this line
  render() {
    return <div />
  }
};

After Test

console.info('after the test');

Solution

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  render() {
    return <div/>
  }
};