React+Redux学习

目录

1.使用react-redux第三方插件开发项目

2.react-redux实现TodoList功能完整实例

---

1.使用react-redux第三方插件开发项目

重要学习途径：官方文档、GitHub中直接搜索。

react-redux官方文档：https://react-redux.js.org/

redux：数据框架；react-redux：方便的在react中使用redux。

（1）安装react-redux

npm install --save react-redux

（2）同时还要安装redux

npm install redux

（3）react-redux的核心API：

1.Provider提供器：Provider连接了store后，组件内的所有组件（如TodoList）都能够连接store，并使用store中的内容。

2.connect方法：将TodoList组件与store进行连接。连接的同时规定TodoList组件的 数据mapStateToProps 和 业务逻辑mapDispatchToProps。

mapStateToProps：将store中的数据state，映射到，组件中的数据props；使得通过props就能访问store中的数据。

mapDispatchToProps：将store.dispatch，挂载到，组件中的props；使得可在TodoList组件逻辑里直接使用dispatch。

由于组件TodoList与store进行了连接，所以当store中的数据变化时，组件能够自动检测到数据变化，进而重新渲染页面。

connect将数据映射关系、业务逻辑集成到了UI组件TodoList中。

在下面的TodoList的例子中，由于该组件内只有一个render函数，所以TodoList变成了一个UI组件，当使用connect将TodoList与一些数据、业务逻辑相结合后，connect返回的内容其实就是一个容器组件。该容器组件可以理解为，使用逻辑对UI组件进行了包装；容器组件在调用UI组件时，它把数据、逻辑都准备好了。

2.react-redux实现TodoList功能完整实例

（1）目录结构

（2）index.js（程序入口）

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import {Provider} from 'react-redux';
import store from './store';

//这样写才可以，视频写法不行
ReactDOM.render(
    <Provider store={store}>
        <TodoList/>
    </Provider>, document.getElementById('root'));

（3）TodoList.js

import React from 'react';
import {connect} from 'react-redux';
import {getInputAction, getButtonAction, getItemAction} from './store/actionCreators';
import 'antd/dist/antd.css';
import {Input, Button, List} from "antd";

const TodoList = (props) =>{
    return (
        <div style={{marginTop:10, marginLeft: 10}}>
            <Input placeholder={'todo info'} style={{marginRight:10, marginBottom:10, width: 300}}
                   value={props.inputValue}
                   onChange={props.handleChange}/>
            <Button type={'primary'} onClick={props.handleClick}>提交</Button>
            <List bordered dataSource={props.list} style={{width: 300}}
                  renderItem={(item, index)=>(
                      <List.Item onClick={()=>{props.handleDelete(index)}}>{item}</List.Item>
                  )}/>
        </div>
    )
};

//将store中的数据state，映射到，组件中的数据props
const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
};

//将store.dispatch，挂载到，组件中的props上，之后直接通过props使用dispatch
const mapDispatchToProps = (dispatch) => {
    return {
        handleChange(e) {
            const action = getInputAction(e.target.value);
            dispatch(action);
        },
        handleClick() {
            const action = getButtonAction();
            dispatch(action);
        },
        handleDelete(index){
            const action = getItemAction(index);
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
//将TodoList与store进行连接(因为TodoList在Provider组件内，所以可以连接)；
//TodoList与store连接的规则 由mapStateToProps、mapDispatchToProps定义

（4）store/index.js（创建store）

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

（5）store/actionTypes.js

export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_INPUT_VALUE = 'add_input_value';
export const DELETE_LIST_VALUE = 'delete_list_value';

（6）store/actionCreator.js（统一创建action）

import {CHANGE_INPUT_VALUE, ADD_INPUT_VALUE, DELETE_LIST_VALUE} from './actionTypes';

export const getInputAction = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
});

export const getButtonAction = () => ({
    type: ADD_INPUT_VALUE
});

export const getItemAction = (index) => ({
    type: DELETE_LIST_VALUE,
    index
});

（7）store/reducer.js

import {CHANGE_INPUT_VALUE, ADD_INPUT_VALUE, DELETE_LIST_VALUE} from './actionTypes';

const defaultState = {
    inputValue: '',
    list: []
};

export default (state = defaultState, action) => {
    if (action.type === CHANGE_INPUT_VALUE) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        return newState;
    }
    if (action.type === ADD_INPUT_VALUE) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        newState.inputValue='';
        return newState;
    }
    if (action.type === DELETE_LIST_VALUE) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1);
        return newState;
    }
    return state;
}