Connecting redux store to a list

Question

I'm trying to connect my store to my backend but when I'm doing my change on the store nothing changes on my todoList component it's like the basic connected option of redux doesn't work. I don't know where are the problem I consoled log everywhere to see and I believe the problem is in the connect but I don't see why. This is the Store.

 async function makeGetRequest() { let res = await axios.get("http://localhost:5000/urls/todos"); let data = await res.data; initialState.todos = data; console.log(initialState.todos); } let initialState = { todos: [ { todo_id: "2345235-2345345-345345", content: "Manger", enable: false, }, { todo_id: "2345235-2345345-345", content: "Dormir", enable: false, }, { todo_id: "2345235-23645-345345", content: "Boire", enable: false, }, ], }; console.log(initialState.todos); makeGetRequest(); const rootReducer = (state = initialState, action) => { return state; }; export default rootReducer;

The console.log() is normal. The logs

this is where I need to display it.

 const todoList = ({ todos }) => { return ( <div> <ListGroup> {todos.map((todo) => { return ( <div key={todo.todo_id} className=""> <ListGroupItem className="mt-1 mx-5 text-center rounded-pill inline" color="success" > <h5 className=""> {todo.content}</h5> <button type="button" className=" btn btn-dark rounded-pill "> Dark </button> </ListGroupItem> </div> ); })} </ListGroup> </div> ); }; const mapSateToProps = (state) => { return { todos: state.todos, }; }; export default connect(mapSateToProps)(todoList);

and it display only the hardcoded state. hope for help

Answer 1

You need to make the http request in your component mounting phase:

const todoList = ({ todos, dispatch }) => {

  React.useEffect(() => {
    let res = await axios.get("http://localhost:5000/urls/todos");
    let data = await res.data;
    dispatch({type: 'INIT_DATA', payload: data});
  }, []);

  return (
    <div>
      <ListGroup>
        {todos.map((todo) => {
          return (
            <div key={todo.todo_id} className="">
              <ListGroupItem
                className="mt-1 mx-5 text-center rounded-pill inline"
                color="success"
              >
                <h5 className=""> {todo.content}</h5>
                <button type="button" className="  btn btn-dark rounded-pill ">
                  Dark
                </button>
              </ListGroupItem>
            </div>
          );
        })}
      </ListGroup>
    </div>
  );
};

and you need to change your reducer:

const rootReducer = (state = [], action) => {
  switch(action.type) {
    case 'INIT_DATA': return action.payload;
     
    default: return state;
  } 
};

This is a short way to do what you want, but it's recommended to use action.type as a const variable rather than a hardcoded string.

You should also make an actions file which you can dispatch to the store your actions that you are doing to the todo list (like adding items, deleting and more) in your app.

Take a look at this: redux basic tutorial