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>
|
|||
|
);
|
|||
|
}
|
|||
|
};
|
|||
|
```
|