react-redux入门使用

react-redux

demo的git

安装react-redux和redux

yarn add react-redux
yarn add redux

创建store文件夹

react-redux的provider和connect

配置src/index.js

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

const App=(
    //被Provider包裹的组件都可以获得store里面的state值
    <Provider store={store}>
        <TodoList />
    </Provider>
)
ReactDOM.render(App, document.getElementById('root'));

/store/index

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

const store = createStore(reducer)

export default store

/store/reducer

import { CHANGE_INPUT,ADD_ITEM } from './actionTypes'
const defaultState = {
    inputValue:'writting',
    list:['1']
}

export default (state = defaultState,action) =>{
    if(action.type === CHANGE_INPUT){
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState;
    }
    if(action.type === ADD_ITEM){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        return newState;
    }
    return state
}

/store/actionCreators

import { CHANGE_INPUT,  ADD_ITEM } from './actionTypes'
//返回对象({})
export const changeInputAction = (value)=>({
    type:CHANGE_INPUT,//type有点标识符的意思
    value
})
export const addItemAction = ()=>({
    type:ADD_ITEM//type有点标识符的意思
})

/store/actionTypes

export const CHANGE_INPUT = 'changeInput'
export const ADD_ITEM = 'addItem'

/comonents/TodoList

import React, { Component,Fragment } from 'react';
import { Input } from 'antd';
import { Button } from 'antd';
import { List } from 'antd';
import { connect } from 'react-redux'
import { changeInputAction,addItemAction } from '../store/actionCreators'
//没有业务流程（constructor），写成方法组件性能更好
class TodoList extends Component {
    render() { 
        //项目优化
        let { inputValue,list,inputChange,addItem } = this.props
        return (
            <Fragment>
                <div style={{marginTop:'20px'}}>
                    <Input 
                        style={{width:'300px',marginRight:'10px'}} 
                        value = {inputValue}
                        onChange = {inputChange}
                    />
                    <Button type="primary" onClick={addItem}>提交</Button>
                </div>
                <div style={{marginTop:'20px'}}>
                    <List
                        size="large"
                        bordered
                        dataSource={list}
                        renderItem={(item,index) => 
                            <List.Item>{item}</List.Item>} 
                        />
                </div>
            </Fragment>
        );
    }
}
//映射关系,把store.state中的inputValue给props中的inputValue
//把store.state中的list给props中的list
const stateToProps = (state)=>{
    return {
        inputValue:state.inputValue,
        list:state.list
    }
}
//映射，this.props.inputChange调用，多个方法return加逗号（，）
const dispatchToProps = (dispatch)=>{
    return {
        inputChange(e){
            let action = changeInputAction(e.target.value)
            dispatch(action)
        },
        addItem(){
            let action = addItemAction()
            dispatch(action)
        }
    }
}

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