103 lines
3.6 KiB
Markdown
103 lines
3.6 KiB
Markdown
---
|
|
id: 5a24c314108439a4d4036141
|
|
title: Getting Started with React Redux
|
|
challengeType: 6
|
|
forumTopicId: 301430
|
|
dashedName: getting-started-with-react-redux
|
|
---
|
|
|
|
# --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.
|
|
|
|
# --hints--
|
|
|
|
The `DisplayMessages` component should render an empty `div` element.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
|
|
return mockedComponent.find('div').text() === '';
|
|
})()
|
|
);
|
|
```
|
|
|
|
The `DisplayMessages` constructor should be called properly with `super`, passing in `props`.
|
|
|
|
```js
|
|
(getUserInput) =>
|
|
assert(
|
|
(function () {
|
|
const noWhiteSpace = __helpers.removeWhiteSpace(getUserInput('index'));
|
|
return (
|
|
noWhiteSpace.includes('constructor(props)') &&
|
|
noWhiteSpace.includes('super(props')
|
|
);
|
|
})()
|
|
);
|
|
```
|
|
|
|
The `DisplayMessages` component should have an initial state equal to `{input: "", messages: []}`.
|
|
|
|
```js
|
|
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
|
|
);
|
|
})()
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --after-user-code--
|
|
|
|
```jsx
|
|
ReactDOM.render(<DisplayMessages />, document.getElementById('root'))
|
|
```
|
|
|
|
## --seed-contents--
|
|
|
|
```jsx
|
|
class DisplayMessages extends React.Component {
|
|
// Change code below this line
|
|
|
|
// Change code above this line
|
|
render() {
|
|
return <div />
|
|
}
|
|
};
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```jsx
|
|
class DisplayMessages extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
input: '',
|
|
messages: []
|
|
}
|
|
}
|
|
render() {
|
|
return <div/>
|
|
}
|
|
};
|
|
```
|