我对 React 中的状态值有疑问（请帮助我.......）[关闭]答案

【问题标题】：I have a question about the state value in React (plz help me.......) [closed]我对 React 中的状态值有疑问（请帮助我.......）[关闭]
【发布时间】：2020-12-27 06:25:42
【问题描述】：

//todos.js
const ADD_TODO='todos/ADD_TODO';
const TOGGLE_TODO='todos/TOGGLE_TODO';

let nextId=1;
export const addTodo=(title,text)=>({
    type:ADD_TODO,
    todo:{
        id:nextId++,
        title,
        text
    }
});
export const toggleTodo=id=>({
    type:TOGGLE_TODO,
    id
});

const initialState={
    current_memo:0,
    memolist:[
        {
            id:1,
            title:'i am',
            text:'so tired'
        },
    ]
};

export default function todos(state=initialState, action){
    switch(action.type){
        case ADD_TODO:
            return{
                ...state,
                state: state.memolist.concat(action.todo), //Question 1.
                current_memo: action.todo.id
            } 
        
        case TOGGLE_TODO:
            return state.current_memo;
        default:
            return state;
    }
}


//TodosContainer.js
function TodosContainer(){
    const todos=useSelector(state=>state.todos);  //Question 3.
    const dispatch=useDispatch();
    
    const onCreate=useCallback((title,text)=>dispatch(addTodo(title,text)),[dispatch]);
    const onToggle=useCallback(id =>dispatch(toggleTodo(id)),[dispatch]);

    return <Todos
        todos={todos}
        onCreate={onCreate}
        onToggle={onToggle}
    />;
}

export default TodosContainer;

问题 1。在这种情况下，状态到底是什么意思？是初始状态吗？我想通过ADD_MEMO类型给memolist添加一个数组，但是运行不正常。有什么问题？

问题 2。

current_memo:0,
    memolist:[
        {
            id:1,
            title:'i am',
            text:'is tired'
        },
        {
            id:2,
            title:'who am i',
            text:'where is it'
        },
    ]

如果数组是这样的，你想通过访问memolist的第一个数组来获取标题。 state.memolist[1].title 我可以这样访问吗？我不知道方法。

问题 3。整个initialState值中的哪一个是useSelector接收到的todos？如何获得备忘录？

如果你能告诉我一件事，我将非常感激......

【问题讨论】：

我在第一个问题中所说的状态是指函数'todos'中的状态

标签： reactjs

【解决方案1】：

在这种情况下，状态到底是什么意思？是初始状态吗？我想通过ADD_MEMO类型给memolist添加一个数组，但是运行不正常。有什么问题？

对于每个 Reducer，它都需要一个初始状态。通过 ADD_MEMO 等动作，可以更新 memolist 等状态。通过link 更好地了解redux 流程。
如果要更新数组，则必须以不可变的方式进行。它不会工作，因为 concat() 不会工作。 state: state.memolist.concat(action.todo).

case ADD_TODO:
            return{
                ...state,
                memolist: [ ... state.memolist , 
                            {
                              id: action.todo.id,
                              text: action.todo.text,
                              completed: true
                            }
                          ]
                current_memo: action.todo.id
            }

如果数组是这样的，你想通过访问memolist的第一个数组来获取标题。 state.memolist1.title 可以这样访问吗？我不知道方法。 Array 从 0 开始索引。所以它将是 memolist[0].title

useSelector接收到的todos是整个initialState值中的哪一个？如何获得备忘录？

useSelector 接受一个函数，我们称之为选择器函数。选择器是一个函数，它将整个 Redux 存储状态作为其参数，从状态中读取一些值，然后返回该结果。
在运行以下行后尝试打印状态值。就像从所有的东西中，你会选择你的东西。

const todos=useSelector(state=>state.memolist);

【讨论】：

【解决方案2】：

您的示例不仅仅是单独使用 React。它还使用 Redux 来维护和改变应用程序的全局状态。

todos() 方法接收一个状态（默认值为 initialState）和一个动作，并根据该动作返回一个变异状态。

例如，如果操作是 ADD_TODO 类型，它将返回添加了附加项的状态。

TodosContainer 正在使用“useSelector”从 Redux 存储中提取其值。

【讨论】：