Question

我有这个动作

npm install utif

和这样的减速器

export function fetchBranches() {
  return async dispatch => {
    const result = await axios.get('https://localhost:5002/Branches')
    dispatch({ type: FETCH_BRANCHES, payload: result.data.value })
  }
}

在我的组件中，我尝试做这样的事情

export const branchReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_BRANCHES: {
      return { ...state, branches: action.payload }
    }
    default: return state
  }
}

所以我的问题是我正在尝试获取无限数量的请求（我可以在 redux 开发工具中看到它们）。我的页面没有更新，但是如果转到其他页面然后返回到尝试执行此提取的页面，我可以在商店和页面上看到值。所以问题是：

我应该在哪里以及如何分派操作来获取一些数据以进行渲染？
为什么我收到这么多请求，我该如何解决？

更新：非常感谢您的回答，但我仍然看到我的组件在从 api 接收数据之前呈现的行为。我想尝试 const dispatch = useDispatch() dispatch(fetchBranches()) const branches = useSelector(state => state.branches.branches) return <> some component that uses branches </> 并在 useState 中设置状态，但我无法使用 useEffect。加载数据后，我应该怎么做才能重新渲染组件？

UPD2：现在我的组件看起来像

useSelector

Answer 1

调度通常不应直接在渲染中完成，而应在 useEffect 或事件回调中完成。就你而言，

const dispatch = useDispatch()
useEffect(() => { 
  dispatch(fetchBranches());
  }, 
  [dispatch]
)
const branches = useSelector(state => state.branches.branches)

另请注意，您在此处编写了相当古老的 redux 风格 - 请阅读 official tutorials 以了解我们正式推荐的推荐“现代”风格的 redux。你最终会少写很多代码。

Answer 2

你应该尝试将你的 dispatch action 放到 useEffect 中，这样代码只会像这样执行一次：

const dispatch = useDispatch()

React.useEffect(() => {
dispatch(fetchBranches())
}, [])

文档here。

Answer 3

您的 HTTP 请求操作会导致组件产生副作用。每次状态更改都会导致重新渲染组件。为避免副作用，您应该在组件中使用 useEffect 钩子。

在您的组件中，

const dispatch = useDispatch()
const onFetchBranches = useCallback(() => dispatch(fetchBranches()), [dispatch]);

const branches = useSelector(state => state.branches.branches)

useEffect(() => {
  onFetchBranches();
}, [onFetchBranches]);

return <>
  some component that uses branches
</>

您应该查看 Reactjs 文档以更好地理解 useEffect hook。 https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Answer 4

dispatch 将 action 插入 useEffect 钩子以解决您的问题。

试试：

useEffect(() => dispatch(fetchBranches()), [])

Answer 5

也许你试试这个：

<!DOCTYPE html>
<html><h2>Overhead Press</h2>
<body>
<table class="wp-block-advgb-table advgb-table-frontend is-style-default"><tbody><td style="background-color:#FFB6C1">Exercise</td><td style="background-color:#FFB6C1"<td>Reps<td style="background-color:#FFB6C1"</td>Sets</td><td style="background-color:#FFB6C1"</td>Notes<html>
  <tr>
  </tr>
 </tr><td>Wrist Curls</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td>
</tr>
 </tr><td>Chin Ups</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td>
</tr>
 </tr><td>Pull Ups</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td>
</tr>
 </tr><td>Wall Handstands</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td></tr>
 </tr><td>Handstand To Chest</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td></tr>
 </tr><td>Headstand To Handstand</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td></tr></body></td>
</table>

</body>
</html>
<html><h2>Abs</h2>
<body>
<table class="wp-block-advgb-table advgb-table-frontend is-style-default"><tbody><td style="background-color:#FFB6C1">Exercise</td><td style="background-color:#FFB6C1"<td>Reps<td style="background-color:#FFB6C1"</td>Sets</td><td style="background-color:#FFB6C1"</td>Notes<html>
  <tr>
  </tr>
 </tr><td>Lunges</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td></tr>
 </tr><td>Lunges</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td></tr>
 </tr><td>Lunges</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td></tr>
 </tr><td>Lunges</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td></tr>
 </tr><td>Lunges</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td></tr>
 </tr><td>Lunges</td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></body></td><td><body>
<form action="/action_page.php">
  <label for="quantity"></label>
  <input type="number" id="quantity" name="quantity"maxlength="4" size="4"><br>
</body></td>
</table><br>
  <input type="submit" value="Submit" onclick="addRow()"> </button>
</form> 

</body>
</html>

React 和 redux 使用异步数据获取

5 个答案: