11-React Redux Setup

Time: 20200129

先装必要的环境：yarn add redux react-redux

项目结构

我们先把redux相关的准备工作都放到/redux文件夹下。

关于cake的都放在/redux/cake文件夹下。

• cakeTypes.js

export const BUY_CAKE = 'BUY_CAKE'

• cakeActions.js

import { BUY_CAKE } from './cakeTypes'

export const buyCake = () => {
    return {
        type: BUY_CAKE
    }
}

• cakeReducer.js

import { BUY_CAKE } from './cakeTypes'

const initialState = {
    numOfCakes: 10,
}

const cakeReducer = (state=initialState, action) => {
    switch (action.type) {
        case BUY_CAKE:
            return {
                ...state,
                numOfCakes: state.numOfCakes - 1
            }
        default:
            return state
    }
}
export default cakeReducer

在/redux目录下，新建store.js，因为整个应用就一个store。代码如下：

import { createStore } from 'redux'
import cakeReducer from './cakes/cakeReducer'

const store = createStore(cakeReducer)

export default store

导出我们创建的store备用。

然后进入到React UI部分。

在App.js中：

import React from 'react';
import './App.css';
import CakeContainer from './components/CakeContainer';
import { Provider } from 'react-redux'
import store from './redux/store'

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <CakeContainer />
      </div>
    </Provider>
    
  );
}

export default App;

主要有以下几个重点，首先是如何把store用到项目中？答案是使用Provider，并将store作为Provider的props传入。

截屏2020-01-29下午5.39.10.png

END.