Redux之react-redux简单项目入门

一时失言乱红尘 2022-05-20 02:05 231阅读 0赞

# 一：效果图 #

![70][]

# 二：目录结构 #

注意：已经安装了react官方脚手架（进行修改）

![70 1][]

# 三：相关代码 #

##### 1:index.js #####

import React from 'react';
    import ReactDOM from 'react-dom';
    import TodoList from './TodoList';
    
    //第一步
    import {
      Provider} from 'react-redux';//引入react-redux
    import store from './store/index';
    
    //作用：把store提供给<Provider></Provider>所有的组件实现store共享
    const App=(
        <Provider store={store}>
            <TodoList/>
            {
      /*这里面的组件都有能力获取store里的数据*/}
            {
      /*<A></A>*/}
            {
      /*<B></B>*/}
        </Provider>
    );
    //
    // ReactDOM.render(<TodoList />, document.getElementById('root'));
    ReactDOM.render(App, document.getElementById('root'));

##### 2:TodoList.js #####

import React,{
      Component} from 'react';
    
    
    //第二步
    import {
      connect} from 'react-redux';
    
    class TodoList extends Component{
         render(){
            return(
                <div>
                    <input
                        value={
      this.props.inputValue}//使用store传的值
                        onChange={
      this.props.changeInputValue}
                    />
                    <button  onClick={
      this.props.addItem}>提交</button>
                    <ul>
                        {
                            this.props.list.map((item,index)=>{
                                return <li key={index} onClick={()=>this.props.deleteItem(index)}>{item}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
    
    }
    //规定映射条件
    //store里的state映射到组件的props里
    const mapStateToProps=(state)=>{
        return {
            inputValue:state.inputValue,//inputValue是指组件this.props.inputValue,state.inputValue是指store里的inputValue
            list:state.list,
        }
    };
    
    //把store.dispatch映射到组件的props上
    const mapDispatchToProps=(dispatch)=>{
      return {
          //把这个函数映射到组件的props上
          changeInputValue(e){
               const action={
      //1:创建action消息
                   type:'change_input_value',
                   value:e.target.value,//把输入框里的值传给store
               };
               dispatch(action);//2：把这个消息传给store处理
          },
          addItem(){
              const action={
                  type:'add_item',
              };
              dispatch(action);
          },
          deleteItem(index){
              const action={
                  type:'delete_item',
                  index:index,
              };
              dispatch(action);
          }
      }
    };
    
    //目的：使TodoList和store做链接
    export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

##### 3:store/index.js #####

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

##### 4:store/reducer.js #####

[70]: /images/20220520/b5d271c93fd1482eaca379711b75cfb9.png
[70 1]: /images/20220520/a9a7c68e14fe43ba9b86f0ec632829e1.png