Component に store を connect する
https://codesandbox.io/s/5ykr13wjp4
components/ImageList.js
受け取った URL を元に img 要素を作成するコンポーネント
import React from "react";
const ImageList = ({ urlList }) => {
const list = urlList.map(url => {
return (
<li key={url}>
{url}
<img src={url} alt="" />
</li>
);
});
return <ul>{list}</ul>;
};
export default ImageList;
containers/ImageList.js
store を先ほど作成したコンポーネントに connect する
import ImageList from "../components/ImageList";
import { connect } from "react-redux";
const mapStateToProps = state => {
return {
urlList: state.imageUrls
};
};
export default connect(mapStateToProps, null)(ImageList);
app.js
connect されたコンポーネントを使用する
import React from "react";
import ImageList from "./containers/ImageList";
const App = () => {
return (
<div>
App
<ImageList />
</div>
);
};
export default App;