React+Redux应用_组件

• useSelector

  useSelector 这个 hooks 让我们的组件从 Redux 的 store 状态树中提取它需要的任何数据。

  src/features/counter/Counter.js

  xxxxxxxxxx
  import { useSelector } from 'react-redux';
  import {
    selectCount
  } from './counterSlice';
  const count = useSelector(selectCount);
  

  ---

  srcfeatures/counter/counterSlice.js

  xxxxxxxxxx
  // selector 函数允许我们从 state 中获取值
  // Selectors 也可以在使用的地方内联的方式定义
  // 而不是仅仅只能在 slice 文件中。例如 : `useSelector((state) => state.counter.value)`
  export const selectCount = state => state.counter.value
  
  

  我们可以直接在组件文件当中，这么去获取数据：

  xxxxxxxxxx
  const count = useSelector(state => state.counter.value);
  

• useDispatch

  使用useDispatch来dispatch action

  src/features/counter/Counter.js

  xxxxxxxxxx
  import {  useDispatch } from 'react-redux';
  import {
    increment
  } from './counterSlice';
  <button
    className={styles.button}
    aria-label="Increment value"
    onClick={() => dispatch(increment())}
  >
    +
  </button>
  

• Providing the Store

  xxxxxxxxxx
  import React from 'react';
  import { createRoot } from 'react-dom/client';
  import { Provider } from 'react-redux';
  import { store } from './app/store';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  import './index.css';
  
  const container = document.getElementById('root');
  const root = createRoot(container);
  
  root.render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  );