398 lines
11 KiB
Markdown
398 lines
11 KiB
Markdown
---
|
||
id: 5a24c314108439a4d4036149
|
||
title: 将局部状态提取到 Redux 中
|
||
challengeType: 6
|
||
forumTopicId: 301428
|
||
dashedName: extract-local-state-into-redux
|
||
---
|
||
|
||
# --description--
|
||
|
||
马上就完成了! 请回顾一下为管理 React messages app 的状态写的 Redux 代码。 现在有了连接好的 Redux，还要从`Presentational`组件中提取状态管理到 Redux， 目前，已连接 Redux，但正在 `Presentational` 组件中本地处理状态。
|
||
|
||
# --instructions--
|
||
|
||
在 `Presentational` 组件中，先删除本地 `state` 中的 `messages` 属性， 被删的 messages 将由 Redux 管理。 接着，修改 `submitMessage()` 方法，使该方法从 `this.props` 那里分发 `submitNewMessage()`；从本地 `state` 中传入当前消息输入作为参数。 因本地状态删除了 `messages` 属性，所以在调用 `this.setState()` 时也要删除 `messages` 属性。 最后，修改 `render()` 方法，使其所映射的消息是从 `props` 接收的，而不是 `state`
|
||
|
||
完成这些更改后，我们的应用会实现 Redux 管理应用的状态，但它继续运行着相同的功能。 此示例还阐明了组件获得本地 `state` 的方式，即在自己的 `state` 中继续跟踪用户本地输入。 由此可见，Redux 为 React 提供了很有用的状态管理框架。 先前，仅使用 React 的本地状态也实现了相同的结果，这在应付简单的应用时通常是可行的。 但是，随着应用变得越来越大，越来越复杂，应用的状态管理也变得非常困难，Redux 就是为解决这样的问题而诞生的。
|
||
|
||
# --hints--
|
||
|
||
`AppWrapper` 应该渲染该到页面上。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
||
return mockedComponent.find('AppWrapper').length === 1;
|
||
})()
|
||
);
|
||
```
|
||
|
||
`Presentational` 应该渲染到页面上.
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
||
return mockedComponent.find('Presentational').length === 1;
|
||
})()
|
||
);
|
||
```
|
||
|
||
`Presentational` 组件应渲染 `h2`、`input`、`button`、`ul` 四个元素。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
||
const PresentationalComponent = mockedComponent.find('Presentational');
|
||
return (
|
||
PresentationalComponent.find('div').length === 1 &&
|
||
PresentationalComponent.find('h2').length === 1 &&
|
||
PresentationalComponent.find('button').length === 1 &&
|
||
PresentationalComponent.find('ul').length === 1
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
`Presentational` 组件应接收 Redux store 的 `messages` 属性。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
||
const PresentationalComponent = mockedComponent.find('Presentational');
|
||
const props = PresentationalComponent.props();
|
||
return Array.isArray(props.messages);
|
||
})()
|
||
);
|
||
```
|
||
|
||
`Presentational` 组件应接收创建 action 的函数的 `submitMessage` 属性。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
||
const PresentationalComponent = mockedComponent.find('Presentational');
|
||
const props = PresentationalComponent.props();
|
||
return typeof props.submitNewMessage === 'function';
|
||
})()
|
||
);
|
||
```
|
||
|
||
`Presentational` 组件的状态应包含一个初始化为空字符串的 `input` 属性。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
||
const PresentationalState = mockedComponent
|
||
.find('Presentational')
|
||
.instance().state;
|
||
return (
|
||
typeof PresentationalState.input === 'string' &&
|
||
Object.keys(PresentationalState).length === 1
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
键入 `input` 元素应更新 `Presentational` 组件的状态。
|
||
|
||
```js
|
||
async () => {
|
||
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
||
const testValue = '__MOCK__INPUT__';
|
||
const waitForIt = (fn) =>
|
||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||
const causeChange = (c, v) =>
|
||
c.find('input').simulate('change', { target: { value: v } });
|
||
let initialInput = mockedComponent.find('Presentational').find('input');
|
||
const changed = () => {
|
||
causeChange(mockedComponent, testValue);
|
||
return waitForIt(() => mockedComponent);
|
||
};
|
||
const updated = await changed();
|
||
const updatedInput = updated.find('Presentational').find('input');
|
||
assert(
|
||
initialInput.props().value === '' &&
|
||
updatedInput.props().value === '__MOCK__INPUT__'
|
||
);
|
||
};
|
||
```
|
||
|
||
在 `Presentational` 组件上 dispatch `submitMessage` 应更新 Redux store 并清除本地状态中的输入。
|
||
|
||
```js
|
||
async () => {
|
||
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
||
const waitForIt = (fn) =>
|
||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||
let beforeProps = mockedComponent.find('Presentational').props();
|
||
const testValue = '__TEST__EVENT__INPUT__';
|
||
const causeChange = (c, v) =>
|
||
c.find('input').simulate('change', { target: { value: v } });
|
||
const changed = () => {
|
||
causeChange(mockedComponent, testValue);
|
||
return waitForIt(() => mockedComponent);
|
||
};
|
||
const clickButton = () => {
|
||
mockedComponent.find('button').simulate('click');
|
||
return waitForIt(() => mockedComponent);
|
||
};
|
||
const afterChange = await changed();
|
||
const afterChangeInput = afterChange.find('input').props().value;
|
||
const afterClick = await clickButton();
|
||
const afterProps = mockedComponent.find('Presentational').props();
|
||
assert(
|
||
beforeProps.messages.length === 0 &&
|
||
afterChangeInput === testValue &&
|
||
afterProps.messages.pop() === testValue &&
|
||
afterClick.find('input').props().value === ''
|
||
);
|
||
};
|
||
```
|
||
|
||
`Presentational` 组件应渲染 Redux store 中的 `messages`。
|
||
|
||
```js
|
||
async () => {
|
||
const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
|
||
const waitForIt = (fn) =>
|
||
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
|
||
let beforeProps = mockedComponent.find('Presentational').props();
|
||
const testValue = '__TEST__EVENT__INPUT__';
|
||
const causeChange = (c, v) =>
|
||
c.find('input').simulate('change', { target: { value: v } });
|
||
const changed = () => {
|
||
causeChange(mockedComponent, testValue);
|
||
return waitForIt(() => mockedComponent);
|
||
};
|
||
const clickButton = () => {
|
||
mockedComponent.find('button').simulate('click');
|
||
return waitForIt(() => mockedComponent);
|
||
};
|
||
const afterChange = await changed();
|
||
const afterChangeInput = afterChange.find('input').props().value;
|
||
const afterClick = await clickButton();
|
||
const afterProps = mockedComponent.find('Presentational').props();
|
||
assert(
|
||
beforeProps.messages.length === 0 &&
|
||
afterChangeInput === testValue &&
|
||
afterProps.messages.pop() === testValue &&
|
||
afterClick.find('input').props().value === '' &&
|
||
afterClick.find('ul').childAt(0).text() === testValue
|
||
);
|
||
};
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --after-user-code--
|
||
|
||
```jsx
|
||
ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
||
```
|
||
|
||
## --seed-contents--
|
||
|
||
```jsx
|
||
// Redux:
|
||
const ADD = 'ADD';
|
||
|
||
const addMessage = (message) => {
|
||
return {
|
||
type: ADD,
|
||
message: message
|
||
}
|
||
};
|
||
|
||
const messageReducer = (state = [], action) => {
|
||
switch (action.type) {
|
||
case ADD:
|
||
return [
|
||
...state,
|
||
action.message
|
||
];
|
||
default:
|
||
return state;
|
||
}
|
||
};
|
||
|
||
const store = Redux.createStore(messageReducer);
|
||
|
||
// React:
|
||
const Provider = ReactRedux.Provider;
|
||
const connect = ReactRedux.connect;
|
||
|
||
// Change code below this line
|
||
class Presentational extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
input: '',
|
||
messages: []
|
||
}
|
||
this.handleChange = this.handleChange.bind(this);
|
||
this.submitMessage = this.submitMessage.bind(this);
|
||
}
|
||
handleChange(event) {
|
||
this.setState({
|
||
input: event.target.value
|
||
});
|
||
}
|
||
submitMessage() {
|
||
this.setState((state) => ({
|
||
input: '',
|
||
messages: state.messages.concat(state.input)
|
||
}));
|
||
}
|
||
render() {
|
||
return (
|
||
<div>
|
||
<h2>Type in a new Message:</h2>
|
||
<input
|
||
value={this.state.input}
|
||
onChange={this.handleChange}/><br/>
|
||
<button onClick={this.submitMessage}>Submit</button>
|
||
<ul>
|
||
{this.state.messages.map( (message, idx) => {
|
||
return (
|
||
<li key={idx}>{message}</li>
|
||
)
|
||
})
|
||
}
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
// Change code above this line
|
||
|
||
const mapStateToProps = (state) => {
|
||
return {messages: state}
|
||
};
|
||
|
||
const mapDispatchToProps = (dispatch) => {
|
||
return {
|
||
submitNewMessage: (message) => {
|
||
dispatch(addMessage(message))
|
||
}
|
||
}
|
||
};
|
||
|
||
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
|
||
|
||
class AppWrapper extends React.Component {
|
||
render() {
|
||
return (
|
||
<Provider store={store}>
|
||
<Container/>
|
||
</Provider>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
# --solutions--
|
||
|
||
```jsx
|
||
// Redux:
|
||
const ADD = 'ADD';
|
||
|
||
const addMessage = (message) => {
|
||
return {
|
||
type: ADD,
|
||
message: message
|
||
}
|
||
};
|
||
|
||
const messageReducer = (state = [], action) => {
|
||
switch (action.type) {
|
||
case ADD:
|
||
return [
|
||
...state,
|
||
action.message
|
||
];
|
||
default:
|
||
return state;
|
||
}
|
||
};
|
||
|
||
const store = Redux.createStore(messageReducer);
|
||
|
||
// React:
|
||
const Provider = ReactRedux.Provider;
|
||
const connect = ReactRedux.connect;
|
||
|
||
// Change code below this line
|
||
class Presentational extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
input: ''
|
||
}
|
||
this.handleChange = this.handleChange.bind(this);
|
||
this.submitMessage = this.submitMessage.bind(this);
|
||
}
|
||
handleChange(event) {
|
||
this.setState({
|
||
input: event.target.value
|
||
});
|
||
}
|
||
submitMessage() {
|
||
this.props.submitNewMessage(this.state.input);
|
||
this.setState({
|
||
input: ''
|
||
});
|
||
}
|
||
render() {
|
||
return (
|
||
<div>
|
||
<h2>Type in a new Message:</h2>
|
||
<input
|
||
value={this.state.input}
|
||
onChange={this.handleChange}/><br/>
|
||
<button onClick={this.submitMessage}>Submit</button>
|
||
<ul>
|
||
{this.props.messages.map( (message, idx) => {
|
||
return (
|
||
<li key={idx}>{message}</li>
|
||
)
|
||
})
|
||
}
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
// Change code above this line
|
||
|
||
const mapStateToProps = (state) => {
|
||
return {messages: state}
|
||
};
|
||
|
||
const mapDispatchToProps = (dispatch) => {
|
||
return {
|
||
submitNewMessage: (message) => {
|
||
dispatch(addMessage(message))
|
||
}
|
||
}
|
||
};
|
||
|
||
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
|
||
|
||
class AppWrapper extends React.Component {
|
||
render() {
|
||
return (
|
||
<Provider store={store}>
|
||
<Container/>
|
||
</Provider>
|
||
);
|
||
}
|
||
};
|
||
```
|