将 redux 存储连接到列表

Question

我正在尝试将我的商店连接到我的后端，但是当我在商店上进行更改时，我的 todoList 组件没有任何变化，就像 redux 的基本连接选项不起作用一样。我不知道问题在哪里，我到处查看日志，我相信问题出在连接上，但我不明白为什么。这是商店。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;console.log() 是正常的。 日志这是我需要显示它的地方。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);

Answer 1

您需要在组件安装阶段发出 http 请求：

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>

  );

};

你需要改变你的减速器：

const rootReducer = (state = [], action) => {

  switch(action.type) {

    case 'INIT_DATA': return action.payload;

     

    default: return state;

  } 

};

这是做你想做的事情的一种简短方法，但建议用作action.typeconst 变量而不是硬编码字符串。

您还应该制作一个操作文件，您可以将您正在对应用程序中的待办事项列表执行的操作（如添加项目、删除等）发送到商店。