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