Redux - 在另一個 component 顯示選取的資訊
Commit
流程
新增 PttPostContent.js
import React, {Component} from "react";
import {connect} from 'react-redux'
const PttPostContent = ({pttPost}) => {
if (!pttPost) {
return <div />
}
return <div>
<div>${pttPost.title}</div>
<div>${pttPost.author}</div>
</div>
}
const mapStateToProps = (state) => {
console.log("mapStateToProps", state)
return {pttPost: state.selectedPttPost}
}
export default connect(mapStateToProps)(PttPostContent)
把 PttPostContent component 加到 App.js
import React from 'react';
import PttPosts from "./components/PttPosts";
import PttPostContent from "./components/PttPostContent"
function App() {
return (
<div>
<div>
<PttPosts />
</div>
<div>
<PttPostContent />
</div>
</div>
);
}
export default App;
當 PttPosts 列表裡的按鈕被點擊時，selectPttPost 就會被呼叫
import React, {Component} from "react";
import {connect} from 'react-redux'
import {selectPttPost} from '../actions'
class PttPosts extends Component {
renderPosts() {
return this.props.pttPosts.map((post) => {
return <div key={post.title}>
${post.title} / ${post.author} <button onClick={() => this.props.selectPttPost(post)} key={post.title}>Click</button>
</div>
});
}
render() {
return <div>{this.renderPosts()}</div>
}
}
const mapStateToProps = (state) => {
console.log(state)
return state;
}
export default connect(mapStateToProps, { selectPttPost })(PttPosts)
根據這個 function，selectPttPost 會被呼叫
src/actions/index.js
export const selectPttPost = pttPost => {
return {
type: "PTT_POST_SELECTED", //required attribute
payload: pttPost
};
};
PttPostContent 裡的 mapStateToProps 也會被呼叫