react-redux 的使用（三）

react-redux 的使用（三）

单个组件的场景下，我们已经学会了如何从仓库里面拿值，那么其他组件怎么拿呢？

关键在于store目录下的index.js文件，如下：

import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'
// 通过 combineReducers 将多个 reducer 组合起来，这个 hello 且听下面娓娓道来
export const store = createStore(combineReducers({
    hello: (preState = 0, { type, data }) => {
        switch (type) {
            case 'add':
                return preState + data
            case 'jian':
                return preState - data
            default:
                return preState
        }
    }
}), applyMiddleware(thunk))

Person组件部分代码：

export default connect(state => ({
    number: state.hello // 这就是拿到了上面 hello 的值，一旦写了这行代码，该组件的 this.props 就多了一个属性 number，反亦
}))(Index)

此时在Person组件内还可以调用仓库当中的add方法，代码如下：

this.props.dispatch({ type: 'add', data: 2 })

``index.js`的代码如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { store } from './store'
import {Provider} from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <App />
    </Provider>
);