Redux的使用：一个简单的入门Demo

 

代码展示：

---

 

type.js:

export default {
    ADD_INPUT_NAME: 'ADD_INPUT_NAME'
}

 

action.js

/**
 * Action类型
 */
import types from '../types'

/**
 * View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。例如：switchMenu
 * @param menuName
 * @returns {{menuName: *, type: string}}
 */

export function addInputName(inputValue) {
    return {
        type: types.ADD_INPUT_NAME,
        inputValue
    }
}

inputReducer.js

import types from "../types";

const initState = {
    inputValue: '李四'
}

export default function(state=initState, action) {
    switch (action.type) {
        case types.ADD_INPUT_NAME: {
            return {
               ...state,
                inputValue: action.inputValue
            }
        }

        default:
            return state;
    }
}

reducer / index.js

/**
 * reducer数据处理
 */
import { combineReducers} from "redux";
import inputReducer from './inputReducer'

const allReducers = {
    inputReducer: inputReducer
}

const rootReducer = combineReducers(allReducers)

export default rootReducer;

store.js

import { createStore } from 'redux';
import reducer from '../reducer';
import { composeWithDevTools } from 'redux-devtools-extension';

let store = createStore(reducer, composeWithDevTools())
export default store;

rich.js页面：

import React, { Component } from 'react';
import { Card, Modal, Button, Input } from 'antd';
import store from '../../redux/store'
import {addToCart, changeLoginName, addInputName, switchMenu} from "../../redux/actions";
import {connect} from "react-redux";

class Richs extends Component {

    constructor(props) {
        super(props);
        this.state={
            inputValues: ''  
        }
    }

    handleInputChange(e) {
        this.setState({
            inputValues: e.target.value
        });


    }

    handleBtnClick(){
        alert(this.state.inputValues) ;
想redux中添加inputValues
        const { dispatch } = this.props;
        dispatch(addInputName(this.state.inputValues))
    }
    render() {
        return (
            <div class="richPage">
                <Card>
                    <div>
                        <h1>我是编辑器，从redux中取出当前的页面的Name</h1>
                        <span><h1>inputValue:</h1><h1>{this.props.inputValue}</h1></span>
                    </div>
                </Card>
                <Card>
                    <Input style={{width: 300}} onChange={this.handleInputChange.bind(this)} placeholder='input value and click btn' />
                    <Button type="primary" onClick={this.handleBtnClick.bind(this)}>click me</Button>
                </Card>
            </div>
        )
    }
}
从redux中获取inputValue属性
const mapState = state => {
    console.log('love:',state.inputReducer.inputValue)
    return {
        inputValue: state.inputReducer.inputValue
    }
}

export default connect(mapState)(Richs);