前端相关 - redux项目搭建

博客代码内容根据技术胖老师系列教程整理，如有侵权，请联系博主删除

src目录结构
src
　store
　　index.js
　　reducer.js
　index.js
　TodoList.js

src中 index,js 内容

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

src中 TodoList,js 内容

import React, {Component} from "react"
import {connect} from 'react-redux'
class TodoList extends Component {
    render() {
        return (
            <div>
                <input
                    value={ this.props.inputvalue}
                    onChange={this.props.inputchange}
                />
                <button>提交</button>
                <ul>
                    <li>{ this.props.inputvalue}</li>
                </ul>
            </div>
        );
    }
}
const stateToProps = (state)=>{
    return{
        inputvalue: state.inputvalue
    }
};

const dispatchToProps = (dispatch)=>{
    return {
        inputchange(e){
            console.log(e)
            let action = {
                type: "chang_input",
                value: e.target.value
            }
            dispatch(action)
        }
    }
}
export default connect(stateToProps,dispatchToProps)(TodoList);

store中 index.js 内容

import React from 'react'
import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer);
export default store

store中 reducer.js 内容

const defaultState = {
    inputvalue: '',
    list: []
};
export default (state = defaultState, action) => {
    if (action.type == 'chang_input'){
        let newstate = JSON.parse(JSON.stringify(state))
        newstate.inputvalue = action.value;
        return newstate
    }
    return state
}

src中 TodoList,js 优化
直接使用箭头函数，不用定义class

import React, {Component} from "react"
import {connect} from 'react-redux'

const TodoList = (props) => {
    let {inputvalue, inputchange, clickbutton, list} = props
    return (
        <div>
            <input
                value={inputvalue}
                onChange={inputchange}
            />
            <button onClick={clickbutton}>提交</button>
            <ul>
                {list.map((items, index) => {
                    return (<li key={index}>{items}</li>)
                })}
            </ul>
        </div>
    );
}

const stateToProps = (state) => {
    return {
        inputvalue: state.inputvalue,
        list: state.list
    }
}

const dispatchToProps = (dispatch) => {
    return {
        inputchange(e) {
            console.log(e)
            let action = {
                type: "chang_input",
                value: e.target.value
            }
            dispatch(action)
        },
        clickbutton() {
            console.log("111111111111")
            let action = {
                type: "add_item"
            }
            dispatch(action)
        }
    }
}

export default connect(stateToProps, dispatchToProps)(TodoList);

src中 TodoList,js 优化
将UI部分提出

• TodoList.js

import React, {Component} from "react"
import {connect} from 'react-redux'

const TodoList = (props) => {
    let {inputvalue, inputchange, clickbutton, list} = props
    return (
        <div>
            <input
                value={inputvalue}
                onChange={inputchange}
            />
            <button onClick={clickbutton}>提交</button>
            <ul>
                {list.map((items, index) => {
                    return (<li key={index}>{items}</li>)
                })}
            </ul>
        </div>
    );
}

const stateToProps = (state) => {
    return {
        inputvalue: state.inputvalue,
        list: state.list
    }
}

const dispatchToProps = (dispatch) => {
    return {
        inputchange(e) {
            console.log(e)
            let action = {
                type: "chang_input",
                value: e.target.value
            }
            dispatch(action)
        },
        clickbutton() {
            console.log("111111111111")
            let action = {
                type: "add_item"
            }
            dispatch(action)
        }
    }
}

export default connect(stateToProps, dispatchToProps)(TodoList);

• TodoListUI.js

import React, {Component} from "react"
import {connect} from 'react-redux'
import {Input, Button, List} from "antd"
import "antd/dist/antd.css"
import store from "./store"
class TodoListUi extends Component {
    render() {
        return (
            <div style={{margin:'20px'}}>
                <div>
                    <Input
                        placeholder={"write somting "} style={{width:"200px"}}
                        onChange={this.changvalue}
                    />
                    <Button type="primary" onClick={this.clickbutton}>點擊</Button>
                </div>
                <div style={{width:'200px',height:"100px"}}>
                    <List
                        bordered
                        dataSource={this.state.datalist}
                        renderItem={item=>(<List.Item>{item}</List.Item>)}
                    />
                </div>
            </div>
        );
    }

    changvalue(e){
        const action={
            type:"change_input",
            value: e.target.value
        }
        store.dispatch(action)
    }
    clickbutton() {
        console.log("111111111111")
        let action = {
            type: "add_item"
        }
        store.dispatch(action)
    }

    storeChange(){
        this.setState(store.getState())
    }
}
export default TodoListUi;

action优化

• actionTypes.js

export const GET_USER_DATA = "getUserData"
export const CHANGE_INPUT = "change_input"
export const ADD_ITEM = "add_item"

• actionCreater.js

import {GET_USER_DATA, CHANGE_INPUT, ADD_ITEM} from "./actionTypes"

export const getUserData = (value) => ({
    type: GET_USER_DATA,
    value
});

export const changvalue = (value) => ({
    type: CHANGE_INPUT,
    value
});

export const changvalue2 = (value) => ({
    type: ADD_ITEM,
    value
});

• reducer.js

import {GET_USER_DATA, CHANGE_INPUT, ADD_ITEM} from "./actionTypes"
const defaultState = {
    inputvalue: '寫點神魔',
    datalist: ["開UI安監局",
        "開竈火"
    ]
};
export default (state = defaultState, action) => {
    if (action.type == CHANGE_INPUT) {
        let newstate = JSON.parse(JSON.stringify(state))
        newstate.inputvalue = action.value
        return newstate
    }
    if (GET_USER_DATA){
        console.log("sssssssssssss")
        let newstate = JSON.parse(JSON.stringify(state))
        console.log(JSON.stringify(action.value))
        newstate.datalist = action.result;
        return newstate
    }
    return state
}

• TodoList.js

import React, {Component} from "react"
import "antd/dist/antd.css"
import store from "./store"
import TodoListUi from "./TodoListUi"
import axios from "axios"
import {GET_USER_DATA, CHANGE_INPUT, ADD_ITEM} from "./store/actionTypes"
import {getUserData,changvalue} from "./store/actionCreater"

class TodoList extends Component {
    constructor(propos) {
        super(propos)
        this.state = store.getState()
        this.changvalue = this.changvalue.bind(this)
        this.storeChange = this.storeChange.bind(this)
        this.clickbutton = this.clickbutton.bind(this)
        store.subscribe(this.storeChange)
    }

    render() {
        return (
            <TodoListUi
                datalist={this.state.datalist}
                changevalue={this.changvalue}
                clickbutton={this.clickbutton}
            />
        );
    }

    changvalue(e) {
        const action = changvalue(e.target.value)
        store.dispatch(action)
    }

    clickbutton() {
        console.log("111111111111")
        let action = {
            type: ADD_ITEM
        }
        store.dispatch(action)
    }

    componentDidMount() {
        axios.get("http://127.0.0.1:3001")
            .then((res) => {
                console.log(res)
                const datas = res.data
                const action = getUserData(datas)
                console.log(action)
                store.dispatch(action)
            }).catch( (error) => {
            console.log(error);
        });
    }

    storeChange() {
        this.setState(store.getState())
    }
}

export default TodoList;

• TodoListUi.js

import React, {Component} from "react"
import {connect} from 'react-redux'
import {Input, Button, List} from "antd"
import "antd/dist/antd.css"
class TodoListUi extends Component {
    render() {
        return (
            <div style={{margin:'20px'}}>
                <div>
                    <Input style={{width:"200px"}}
                        onChange={this.props.changvalue}
                    />
                    <Button type="primary" onClick={this.props.clickbutton}>點擊</Button>
                </div>
                <div style={{width:'200px',height:"100px"}}>
                    <List
                        bordered
                        dataSource={this.props.datalist}
                        renderItem={item=>(<List.Item>{item}</List.Item>)}
                    />
                </div>
            </div>
        );
    }
}
export default TodoListUi;

• index.js

import React from 'react'
import ReactDOM from 'react-dom'
import TodoList from './TodoList'
const App = (
    <TodoList/>
)
ReactDOM.render(
    App,
    document.getElementById("root")
);

结构示例