react redux 学习

最新推荐文章于 2024-06-02 22:48:09 发布

WinterWang0207

最新推荐文章于 2024-06-02 22:48:09 发布

阅读量403

点赞数 1

分类专栏： React 案例

本文链接：https://blog.csdn.net/weixin_38404899/article/details/104416874

版权

React 案例专栏收录该内容

33 篇文章 1 订阅

订阅专栏

说明：

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

先说一下写两个功能的原因是，要写使用两个及以上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.store收到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中定义初始化数据时就用什么格式去接收

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)