首页 » 记事本 » Redux 在车货匹配项目中的实践

Redux 在车货匹配项目中的实践

Redux已经发布3年左右,一直没有在生产环境中实践过,前段时间正好有新需求可以体验一下。本文摘取项目的部分代码进行简单的分析。

设计概览

入口文件:

#goodsNew/index.tsx
import * as React from 'react';
import {createStore, applyMiddleware, Middleware} from 'redux'
import {Provider} from 'react-redux'
import {createLogger} from 'redux-logger'

import './index.css'

import GoodsNew from './goodsNew'

import reducer from './reducers'
import DocumentTitle from "document-title-decorator";

const middleware: Middleware[] = [];
if (process.env.NODE_ENV !== 'production') {
    middleware.push(createLogger())
}

interface Props {
}

interface State {
}

@DocumentTitle("发货")
export default class extends React.Component<Props, State> {
    render() {
        const store = createStore(
            reducer,
            applyMiddleware(...middleware)
        );
        return (
            <Provider store={store}>
                <GoodsNew {...this.props}/>
            </Provider>
        );
    }
}

连接 React 组件与 Redux store:

const mapStateToProps = state => {
    const { remark, inputData, goodsType, vehicleData, fromData, toData, fromDataCode, toDataCode } = state;
    return {
        remark,
        inputData,
        goodsType,
        vehicleData,
        fromData,
        toData,
        fromDataCode, toDataCode
    }
}
export default connect(mapStateToProps)(Body)

reducers

#goodsNew/reducers.js
import { combineReducers } from 'redux'

import { vehicleData, vehicleVisible, fromData, toData, areaVisible,
    fromDataCode,
    toDataCode } from '../../reducers'

const remark = (state = '', action) => {
    switch (action.type) {
        case "UPDATE_REMARK":
            return action.data
        default:
            return state
    }
}
const inputData = (state = {}, action) => {
    switch (action.type) {
        case "UPDATE_DATA":
            return action.data
        default:
            return state
    }
}
const goodsType = (state = '', action) => {
    switch (action.type) {
        case "UPDATE_GOODSTYPE":
            return action.data
        default:
            return state
    }
}

const remarkVisible = (state = false, action) => {
    switch (action.type) {
        case "UPDATE_REMARK_VISIBLE":
            return action.data;
        default:
            return state
    }
}
const goodsTypeVisible = (state = false, action) => {
    switch (action.type) {
        case "GOODS-TYPE-VISIBLE":
            return action.data;
        default:
            return state
    }
}
const rootReducer = combineReducers({
    remark,
    remarkVisible,
    goodsTypeVisible,
    goodsType,
    inputData,
    vehicleData,
    vehicleVisible,
    areaVisible,
    fromData,
    toData,
    fromDataCode,
    toDataCode
});

export default rootReducer

action:

toggleArea = () => {
    const { fromData, toData, fromDataCode, toDataCode, dispatch } = this.props;
    dispatch({
        type: "UPDATE_ADDRESS_FROM",
        data: [toData, toDataCode]
    });
    dispatch({
        type: "UPDATE_ADDRESS_TO",
        data: [fromData, fromDataCode]
    });
}
此文章发表在 记事本 标签为 . 将固定链接加入收藏.