将 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 }) => {&nbsp; React.useEffect(() => {&nbsp; &nbsp; let res = await axios.get("http://localhost:5000/urls/todos");&nbsp; &nbsp; let data = await res.data;&nbsp; &nbsp; dispatch({type: 'INIT_DATA', payload: data});&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <ListGroup>&nbsp; &nbsp; &nbsp; &nbsp; {todos.map((todo) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={todo.todo_id} className="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ListGroupItem&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="mt-1 mx-5 text-center rounded-pill inline"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="success"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5 className=""> {todo.content}</h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" className="&nbsp; btn btn-dark rounded-pill ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dark&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ListGroupItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; </ListGroup>&nbsp; &nbsp; </div>&nbsp; );};你需要改变你的减速器：const rootReducer = (state = [], action) => {&nbsp; switch(action.type) {&nbsp; &nbsp; case 'INIT_DATA': return action.payload;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; default: return state;&nbsp; }&nbsp;};这是做你想做的事情的一种简短方法，但建议用作action.typeconst 变量而不是硬编码字符串。您还应该制作一个操作文件，您可以将您正在对应用程序中的待办事项列表执行的操作（如添加项目、删除等）发送到商店。