react-redux1

安装react-redux

cnpm i react-redux

文件目录

 

 

 

 

定义store文件

index.js文件：

import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;

reducer.js文件：

const defaultState = {
    inputValue:'hello',
    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;
    }
    return state;
}

定义index.js组件渲染部分文件

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

//定义一个APP组件，将store赋值给store，
//Provider可以让全局都可以获得store中的值
const App = (
  <Provider store={store}>
    <TodoList />
  </Provider>
)

ReactDOM.render(App, document.getElementById('root'));

定义TodoList组件文件

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

//this.props.inputValue通过组件传值形式来绑定方法
class TodoList extends Component{
    render() {
        return (
             <Fragment>
             <div>
                 <input type="text" value={this.props.inputValue}
                  onChange={this.props.handleInputValue}/>
                 <button>提交按钮</button>
             </div>
             <ul>
                 <li>列表一</li>
             </ul>
             </Fragment>
        )
    }
   
}

const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue
    }
}
//mapStateToProps 定义连接规则
const mapDispatchToProps = (dispatch) => {
    return {
        handleInputValue: (e) => {
            const action={
                type:'change_input_value',
                value:e.target.value
            }
            dispatch(action)
        } 
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
//connect，把组件和state做连接