現在、reactにてreduxを用いたtodoリストを作成しています。
action,reducer,storeを作成してApp.js内にてstoreから取得した値をmapメソッドで表示させたいのですが、.map is not a function
というエラーが表示されてしまいます。
調べたところ、mapメソッドは配列に対するメソッドであり、受け取っているのがオブジェクトのためエラーがでているということは見当がついたのですが、どこを修正すれば良いのかがわかりません。
何かご助言いただけると幸いです。
よろしくお願い致します。
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux'; import listStore from './redux/store'; export const store = listStore(); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); reportWebVitals();
App.js
import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import './App.css'; import { addAction } from './redux/list.action'; import TodoList from './TodoList'; const App = () => { const dispatch = useDispatch(); const lists = useSelector((state) => state) return ( <div className="App"> <h1> リスト一覧</h1> <ul className="lists"> {lists.map((list, index) => { return ( <TodoList text={list.text} key={index} /> ) })} </ul> </div> ); } export default App;
Todolist.js
import React from 'react'; const TodoList = (props) => { return ( <li> {props.text} </li> ) } export default TodoList;
list.action.js
export const ADD_LIST = "ADD_LIST"; export const addAction = (userState) => { return { type: "ADD_LIST", payload: { text: userState.text, } } };
list.reducer.js
import initialState from "./initialState"; import * as Actions from "./list.action"; const ListReducer = (state = initialState, action) => { switch (action.type) { case Actions.ADD_LIST: return { ...state, ...action.payload } default: return state } } export default ListReducer;
initialState.js
const initialState = { text: "メール返信" }; export default initialState
store.js
import { createStore, combineReducers } from 'redux'; import ListReducer from "./list.reducer"; const listStore = () => { return createStore( combineReducers({ lists: ListReducer, }) ); } export default listStore;
あなたの回答
tips
プレビュー