Redux仅调度一半功能

时间:2020-05-03 17:14:25

标签: javascript redux react-redux reducers

因此,我想直接将最初为1的优先级值替换为其他值。我为此创建了一个redux函数,但是它多次发送了该函数。

动作

export const editPriority = (id, listID, newPriority) => {
  return {
    type: TRELLO_CONSTANTS.PRIORITY,
    payload: { id, listID, newPriority },
  };
};
      const { id, newPriority } = action.payload;
      const card = state[id];
      card.priority = newPriority;
      return { ...state, [`card-${id}`]: card };
    }

export const TRELLO_CONSTANTS = { 优先级:“优先级”, };

and here's my function -

import {editPriority} from './actionTypes.js';

const card=({dispatch})=> {
  const [newPriority, priority] = useState(); 
}

const changePriority = (e) => {
    // newPriority(e);
    priority(e);
    dispatch(editPriority(id, listID, priority));
    console.log(priority);
  };

// and the main function


<button onClick={() => changePriority(1)}>1</button>
<button onClick={() => changePriority(2)}>0</button>

{priority === 0 ? <p>0</p> : null}
{priority === 1 ? <p>1</p> : null}

因此,每当我单击按钮时,它仅调度id和listID,而不调度优先级。另外,我也无法使最后两个三元运算符正常工作。这是访问它们的错误方法吗?

这是我在redux扩展名中得到的输出-

{
  type: 'PRIORITY',
  payload: {
    id: 'card-0',
    listID: 'list-0'
  }
}

1 个答案:

答案 0 :(得分:1)

您需要直接将e传递给editPriority,因为state本质上是异步的,并且priority(e)引起的更改不会立即反映出来。 / p>

const changePriority = (e) => {
    // newPriority(e);
    priority(e);
    dispatch(editPriority(id, listID, e));
 };

建议:

在reducer中,请勿直接更改原始状态

const { id, newPriority } = action.payload;
const card = {...state[id]};
card.priority = newPriority;
return { ...state, [`card-${id}`]: card };

您的优先级状态名称也为newPriority

因此,请在渲染器中使用该值:

{newPriority === 0 ? <p>0</p> : null}
{newPriority === 1 ? <p>1</p> : null}

建议:命名状态时,您可以将其用作const [priority, setPriority] = useState();以避免混淆