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);