使用数据

• 创建组件

  创建pages/User.js文件

  xxxxxxxxxx
  import React, { useRef } from 'react';
  import { useDispatch, useSelector } from 'react-redux'
  import {addUser} from  '../slices/userSlice'
  
  export default function User() {
      const nameRef=useRef()
      const accountRef=useRef()
      //使用dispatch触发action
      const dispatch=useDispatch()
      //使用useSelector来获取store中的数据
      const userList = useSelector(state => state.user.list)
  
      const onAdd = () => {
          const name=nameRef.current.value;
          const account=accountRef.current.value
               //触发添加用户的action
          dispatch(addUser({name,account}))
  
      }
      return (
          <div>
              我是用户页面<br />
              用户名：<input ref={nameRef} required/><br/>
              账号名：<input ref={accountRef} required/><br/>
              {userList.map((item,index) => <li key={index}>
                  用户名是：{item.name}
              </li>)}
  
              <button onClick={onAdd}>添加新用户</button>
  
          </div>
      );
  }
  
  

  xxxxxxxxxx
  //App.js
  import User from './pages/User';
  
  function App() {
    return (
      <div className="App">
       <User/>
      </div>
    );
  }
  

提示：

每当一个 action 被 dispatch 并且 Redux store 被更新时，useSelector 将重新运行我们的选择器函数。

如果选择器返回的值与上次不同，useSelector 将确保我们的组件使用新值重新渲染。

提示：

组件的数据状态都需要放到Store当中吗？？？？

并不是的，整个应用程序所需的全局状态应该放在 Redux store 中。

而只在一个地方用到的状态应该放到组件的 state。

实时效果反馈

1. 下列说法错误的是:

A 使用useSelector来获取Store中的数据状态

B 使用useDispatch来获得dispatch函数

C dispatch action后，传入useSelector的选择器会被重新调用

D 我们应该把组件的所有数据状态都保存到Store中

答案

1=>D