react-redux的使用对比仅使用redux

React-Redux 是 Redux 的一个 React 绑定库，它可以帮助我们更容易地在 React 应用中使用 Redux。主要是通过提供两个主要的功能来实现：<Provider> 组件和 connect() 函数。

1. <Provider> 组件：

这是一个React组件，它接收一个store作为props，然后使用Context API使得该store可以在应用的任何部分使用。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import myReducer from './reducers';
import App from './App';
 
const store = createStore(myReducer);
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

2. connect() 函数：

这是一个函数，它接收两个参数：mapStateToProps和mapDispatchToProps，然后返回一个新的组件，该组件能够让你的容器组件从Redux store获取数据和绑定action creator。

import { connect } from 'react-redux';
import { increment, decrement } from './actions';
 
function Counter({ value, increment, decrement }) {
  return (
    <>
      Value: {value}
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </>
  );
}
 
const mapStateToProps = (state) => ({
  value: state.counter.value
});
 
const mapDispatchToProps = {
  increment,
  decrement
};
 
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

如果你选择不使用React-Redux，你可以直接使用Redux，但是你需要手动地在你的每一个组件中进行store的subscription和dispatching。这样做会使你的代码变得冗长和冗余，因此，使用React-Redux可以使你的代码更加简洁和高效。