member component を作成しました。
この中の componentDidMount() で、 function getMemberList()を呼んでいます。
class Members extends Component{ constructor(props) { super(props); this.state = { members: [] } } componentDidMount() { getMemberList(this.props); } render() { return ( <div> <div>Members</div> {this.state.members.map((member) => ( <li key={member.id}> {member.name} </li> ))} </div> ); } } export default connect((state) => state)(Members);
getMemberList() を読んだ後、サーバへデータ取得して member データを action に設定して、ディスパッチしています。
export function getMemberList(props){ axios.get('/api/members') .then(function (response) { // handle success let data = response.data; let members = data.data; let action = { type: 'GET_MEMBERS', members: members, }; props.dispatch(action); }) .catch(function (error) { // handle error console.log(error); return { type: 'GET_MEMBERS_ERROR', authenticated: false }; }) .finally(function () { // always executed }); }
その後、reducer にて、action の member データをステートに設定しています。
ここまでは、問題ないと思っています。
const initData = { members: [] } export function memberReducer(state = initData, action){ switch (action.type) { case 'GET_MEMBERS': return { members: action.members }; case 'GET_MEMBERS_ERROR': return state; default: return state; } }
riducer内にて、ステートを返していますが、この後のコンポネント内のrenderが呼ばれる想定でいましたが、そうでもないようです。私の理解不足ですが。
そもそも私の理解が間違っているのでしょうか?
また、state / props の使用方法も何だか不安です。
以上、アドバイスをお願いします。
あなたの回答
tips
プレビュー