react redux 学习

r囧r小猫 2023-07-07 03:52 19阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

### 说明： ###

**组件代码是整体复制的，没有切分，可直接使用，注意文件路径就好**

先说一下写两个功能的原因是，要写使用两个及以上reducer的方法

因为redux只能定义一个store，即一个应用一个store，而store只接收一个reducer，所以这两个reducer不同功能不同数据，需要将这些reducer整合到一起；

### 功能： ###

**组件1：**

store数据：number

store方法：点击按钮每次加100

**组件2：**

store数据：异步请求的100条数据

store方法：接受输入，点击增加异步请求提交，store数据增加，返回视图展示

**组件1的方法不牵涉异步，组件2需要用到action异步**

**注意，数据和方法都在store中完成，旧数据和新数据都存储在store，组件内只是拿取，不做任何数据逻辑修改**

### 安装： ###

安装redux 可在任何框架使用

npm install redux --S

安装react redux react使用的redux

npm install react-redux --S

处理异步中间件：

npm install redux-thunk --save

### 开始： ###

redux单向数据流向大概是这样的：

1.视图交互触发=》**action**响应

2.**stor**e收到action的交互需求=>派reducer去接应

3.**reducer**带着旧store数据，去匹配action的type，看看用户想用action的什么方法

4.视图调用action中的方法改变store，然后从store中取新的数据展示给用户

### 总结下来就是仓库中要定义三个大类，第一store，第二action，第三reducer ###

**在react使用redux，分为两大步，**

**第一步：创建仓库**

**第二步：在组件中使用仓库**

## 创建仓库： ##

### **在store文件下创建store.js** ###

**1.从redux中引入createStore方法，使用createStore创建store，createStore函数接收三个参数，**

**后面两个不用可以省略，接受的reducer是唯一且必须的**

**2.引入redux的中间件thunk，用于action中方法的异步处理，引入****applyMiddleware方法，将中间件整合一个数组**

**3.将创建好的rootReducer文件，定义的reducer传入createStore作为参数**

**4.将store导出**

import {createStore, applyMiddleware} from 'redux'
    import thunk from 'redux-thunk'
    //引入rootReducer集合
    import rootReducer from './reducers/index'
    
    //store接收三个参数 第一个reducer或者reducer集合
    //第二个
    //第三个中间件方法
    //applyMiddleware方法，将所有中间件组成一个数组，依次执行
    const initialState={};
    const middleware =[thunk];
    const store = createStore(rootReducer,initialState,applyMiddleware(...middleware))
    
    export default store

### 定义点击按钮增加数字的action，在action文件夹里，创建countActions.js文件 ###

**1.action可以写成对象，也可以写成如下这样的函数，函数型可以接收组件传来的参数**

**我这里无须传参**

**2.action无论写成对象还是函数，都必须定义一个type属性，用于reducer来判断执行哪个方法**

**这里我们将type值单独封装在一个actionType.js文件里**

**3.引入actionType.js文件中需要用到的type类型，这里我们只需要用到ADD\_COUNT**

**4.大多数情况下我们将type类型定义为常量，并使用大写**

import {ADD_COUNT} from '../actions/actionType'
    
    
    
    export const conutAdd = dispatch => {
        return {
          type: ADD_COUNT,
          dispatch
        }
      }

### **actionType.js** ###

//文章列表组件的type
    export const FETCH_POSTS = "fetch_posts"
    export const NEW_POST = 'new_post'
    
    //点击加数字组件的type
    
    export const ADD_COUNT='add_count'

**现在创建第一个点击增加数字组件的reducer**

### 在reducer文件夹下创建counterReducer.js ###

**1.reducer是一个纯函数，它接收两个参数，第一个是初始的（旧的）state（store中的数据），第二个是action**

**2.定义一个初始的state数据，赋值给state，通过action下面的type值，用switch判断，不同的type调用什么不同的方法（返回什么不同的数据）**

import {ADD_COUNT} from '../actions/actionType'
    
    let num = 10000
    function counterReducer (state=num,action){
        console.log('我是count_action',action)
        switch (action.type){
            case ADD_COUNT :
                return state=state+100
                break;
            default:
                return state
                break;
        }
    } 
    
    export default counterReducer

### 定义第二个增加文章列表组件的action，在action文件夹下，创建postActions.js ###

**1.这个action中定义了两个action，每个action拥有不同的type**

**2.第一个action用于页面初始获取文章列表数据，存在store中**

**3.第二个action用于请求和存储用户输入提交后产生的新数据**

**4.注释之后采用了es6的写法，postData=>dispatch=> 箭头函数只有一个参数，可以不写括号，箭头后是箭头函数return的值**

**5.因为已经安装了thunk中间件所以可以直接写异步方法**

**6.action函数return出的函数接收一个dispatch参数，用于分发action**

**7.dispatch函数中，将type和新请求到的数据分发出去，定义一个payload接收请求到的数组item**

//action中做逻辑处理，定义不同逻辑的type类型，便于dispatch分发给store
    import {FETCH_POSTS,NEW_POST} from './actionType'
    
    // export function fetchPosts(){
    //     console.log('触发action')
    //     return function (dispatch){
    //         fetch("https://jsonplaceholder.typicode.com/posts")
    //         .then(res=>res.json()) //解析json
    //         .then(posts=>
    //             //通过dispatch将数据派发出去
    //             dispatch({
    //                 type:FETCH_POSTS,
    //                 payload:posts
    //             })
    //         ) 
    //     }
    // }
    
    //ES6写法
    //获取数据
    export const fetchPosts =()=>dispatch=>{
            fetch("https://jsonplaceholder.typicode.com/posts")
            .then(res=>res.json()) //解析json
            .then(item=>
                //通过dispatch将数据派发出去
                dispatch({
                    type:FETCH_POSTS,
                    payload:item
                })
            ) 
    }
    
    //提交数据
    //将postData参数提交
    export const createPost=postData=>dispatch=>{
        fetch("https://jsonplaceholder.typicode.com/posts",{
                method:"POST",
                headers:{
                    "content-type":"application/json"
                },
                body:JSON.stringify(postData)
            })
            .then(res=>res.json())
            //提交之后将新数据返回，派发
            .then(item=> dispatch({
                type:NEW_POST,
                payload:item
            }))    
    }

### 第二个文章列表组件的reducer，在reducer文件夹下创建postReducer.js ###

**1.刚才上面action的请求到的数据用payload接收了，所以在reducer里，要用action.payload取出，并传入store**

**2.请求到的数据用item参数接收到store**

**3.增加后的一条新数据用newitems参数接收到store**

**4.注意要写default，如果action匹配不到type或者没做任何改变，reducer则返回原state**

import {FETCH_POSTS,NEW_POST} from '../actions/actionType'
    
    //定义state中的数据
    const initialState={
        items:[],
        //注意：用户提交的数据，是个对象
        // const post = {
        //     title:this.state.title,
        //     body:this.state.body
        // }
        newitems:{}
    }
    
    //创建reducer 
    //reducer中不做逻辑处理，只做传递给store的作用，根据不同的action类型，
    //判断返回什么state，没有action则不做state处理
    //作用：传递，不做逻辑处理，接收旧state，返回action处理后的新state
    //一个reducer接收一个state，如果想管理不同的state，可以创建多个reducer
    
    export default function postReducer (state=initialState,action){
        // console.log('触发reducer')
        switch(action.type){
            //若触发FETCH_POSTS，返回请求的state数据
            case FETCH_POSTS:
                return{
                    ...state,
                    //将action中的新数据赋值给store的state中的数据
                    items:action.payload
                }
            case NEW_POST:
                return{
                    ...state,
                    //将新数据返回赋值给newitems
                    newitems:action.payload
                }
            //如果没有任何action 就return原state
            default:
                return state
        }
    }

**最后，要将reducer传递给store做参数，因为store只接受一个reducer，我们有两个reducer，分别有不同的数据要处理，但是都要共享放在store中，这就要求我们将reducer整合起来，传入store**

### 在reducer文件夹下创建index.js ###

**1.从redux中引入combineReducers，用于整合多个reducer**

**2.将多个导出的reducer传入combineReducers**

**3.在一开始的createStore注入的reducer，一定是这个整合后的reducer，这样才能保证组件内共同使用**

//将reducer集合起来的方法
    import { combineReducers } from 'redux'
    import postReducer from './postReducer'
    import counterReducer from './counterReducer'
    
    export default combineReducers({
        posts:postReducer,
        counter:counterReducer
    })

### 现在创建仓库已经完毕，开始在组件中使用了 ###

首先要想每个组件都能用到store中的数据，可以使用Provider组件包裹根组件

### 入口文件index.js中 ###

**1.引入Provider组件，将组件包裹在根组件下面**

**Provider：它是react-redux 提供的一个 React 组件，作用是把state传给它的所有子组件，也就是说 当你用Provider传入数据后 ，下面的所有子组件都可以共享数据。**

**2.将定义好的store引入，并且传入Provider组件**

import React from 'react';
    import ReactDOM from 'react-dom';
     
     
    import App from './App'
     
    //Provider是react-redux提供的一个组件
    import { Provider } from 'react-redux'
    import store from './store/store'
     
     
     
    ReactDOM.render(
           <Provider store={store}>
               <App />
           </Provider>
    ,document.getElementById('root'));

### App.js父组件中： ###

引入三个功能组件

import React from 'react'
    import Article from './Article'
    import PostForm from './PostForm'
    import Counter from './Counter'
    
    function App(){
        return <>
            <Counter></Counter>
            <PostForm></PostForm>
            <Article></Article>
        </>
    }
    
    export default App

### Counter.js计数组件： ###

**1.首先想用store中的数据，必须引入connect函数**

**2.connect函数的写法，connect()()，接受三个参数第一个括号中是，store中的最新数据和action中的方法**，

**第二个括号中的参数是要使用数据的组件名**

**3.将mapStateToProps解析出来，取到最新的counter值，state.counter的意思是，去state中寻找名为counter的reducer**

**4.将此reducer下面的state数据赋值给本组件的num变量**

**5.在视图标签中，用this.props.num就可以使用**

**6.取出action中的点击增加方法，引入action中需要用到的方法，在****connect中的第二个参数解析出来**

**7.在组件视图方法绑定上，或者其他方法中，使用this.props.countAdd即可使用**

import React, { Component } from 'react'
    import { connect } from 'react-redux';
    import {conutAdd} from '../Store3/actions/countActions'
    
    
    class Counter extends Component {
        render() {
            console.log('this.props.num',this.props.num)
            return (
                <div>
                    我是第二个reducer
                    <p>{this.props.num}</p>
                    <button onClick={this.props.conutAdd}>点击加</button>
                </div>
            )
        }
    }
    
    const mapStateToProps =state=>({
        num:state.counter
    })
    
    export default connect(mapStateToProps,{conutAdd})(Counter)

### inout表单组件：PostForm.js ###

**1.取到用户输入的数据后，将action方法调用时，传参给action**

**2.注意，定义用户数据时用的什么格式，在相对的store中定义初始化数据时就用什么格式去接收**

![20200220221429962.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 1][]

**3.只需要用方法不需要用store中的数据，connect 第一个参数可以设置为null**

import React, { Component } from 'react'
    import { connect } from 'react-redux';
    import {createPost} from '../Store3/actions/postActions'
    
     class PostForm extends Component {
         constructor(props){
             super(props)
             this.state={
                title:'',
                body:''
             }
             this.onSubmit= this.onSubmit.bind(this)
             this.onChange = this.onChange.bind(this)
         }
        render() {
            return (
                <div>
                    <h1>添加内容</h1>
                    <form onSubmit={this.onSubmit}>
                        <div>
                            <label>title</label>
                            <br/>
                            <input type="text" name='title' onChange={this.onChange}
                                value={this.state.title}
                            />
                        </div>
                        <div>
                            <label>body</label>
                            <br/>
                            <textarea name="body" onChange={this.onChange}
                                value={this.state.body}
                            ></textarea>
                        </div>
                        <button type='submit'>添加</button>
                    </form>
                </div>
            )
        }
    
        onChange(e){
            // console.log('e.target.name',e.target.name)
            // console.log('e.target.value',e.target.value)
            this.setState({
                [e.target.name]:e.target.value
            })
        }
        onSubmit(e){
            e.preventDefault();
    
            const post = {
                title:this.state.title,
                body:this.state.body
            }
            //调用action中的方法 需要将视图上用户输入的参数传给store
            this.props.createPost(post)
            this.setState({
                title:'',
                body:''
            })
            
        }
    }
    
    export default  connect(null,{createPost})(PostForm)

### 最后，文章列表组件Article.js ###

**1.页面初始化时，在DidMount中调用action请求数据，在mapStateToProps的store中取出数据并赋值给组件中的变量**

**2.这里用到了componentWillReceiveProps生命周期，在每次数据变化时监听最新的数据**

**3.监听store中的newPost是否有数据，如果有就添加进items数组**

**4.至此完成了在store初始化数据，在action中请求数据，返回给reducer，reducer传递给store，组件拿取新数据的过程**

import React, { Component } from 'react'
    import { connect } from 'react-redux';
    //组件中触发action
    import {fetchPosts} from '../Store3/actions/postActions'
    
    class Article extends Component {
        componentDidMount(){
           this.props.fetchPosts() //执行action
        }
    
        componentWillReceiveProps(nextProps){
            if(nextProps.newPost){
                this.props.items.unshift(nextProps.newPost)
            }
            // console.log(nextProps)
        }
    
        render() {
            const dataItem = this.props.items
            return (
                <div>
                    <h1>Posts</h1>
                    {
                        dataItem.map(item=>{
                            return <div key={item.id}>
                                    <h3>{item.title}</h3>
                                    <p>{item.body}</p>
                            </div>
                    })
                    }
                </div>
            )
        }
    }
    
    const mapStateToProps =state=>({
        //state.posts是store中reducer集合的posts
        items:state.posts.items,
        newPost:state.posts.newitems
    })
    
    export default connect(mapStateToProps,{fetchPosts})(Article)

### 结束 ###

总体感受吧 rudex还是比vuex更麻烦一些 虽然里面的api很像 都是那几个 但是redux是单向数据流，就是方便判断数据流向哪里出了问题，但是vuex双向绑定就是方便阿，之前vuex用惯了，突然切换redux还是有点不方便，不过啦，多看文档多练习多思考吧

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200220195750467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70
[20200220221429962.png]: https://img-blog.csdnimg.cn/20200220221429962.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020022022153589.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70