React (5) Redux 进阶

野性酷女 2021-09-17 04:46 343阅读 0赞

## 1.  UI 组件 ##

1.  render()函数放在另外一个单独的UI.js 文件和动作行为分开
2.  UI 上面所用的数据和函数, 通过父组件传递过来,用 **this.props **来接收
3.  UI 组件下面:

import 'antd/dist/antd.css';
    import { Input, Button, List } from 'antd';
    import React, {Component} from 'react';
    
    class TodoListUI extends Component {
        render(){
            return ( <div style={
       { margin: '10px' }}>
            <div>
                <Input value={this.props.inputValue}
                 style={
       { width: '300px', marginRight: '10px' }}
                 onChange={this.props.handleInputChange}
                 />
                <Button type="primary"
                onClick={this.props.btnClick}
                >提交</Button>
            </div>
            <List
                bordered
                dataSource={this.props.list}
                renderItem={(item, index) => (<List.Item onClick={(index)=>{this.props.handledelete(index)}}>{item}</List.Item>)}
                style={
       {marginTop:'10px',width:'300px'}}
            />
        </div>)
        }
    }
    
    export default TodoListUI

**父组件传递数据**

render() {
            return (
               <TodoListUI 
               inputValue={this.state.inputValue}
               handleInputChange={this.handleInputChange}
               btnClick={this.btnClick}
               list={this.state.list}
               handledelete={this.handledelete}
               />
            )
        }

# #

## 2.  无状态组件 ##

1.  当一个普通的组件只有render()函数的时候, 没有业务逻辑的时候它就是一个无状态组件, 类似没有业务逻辑的UI组件
2.  无状态组件性能比较高, 因为它就是一个js, 一个普通组件既包含一个类还有render(), 性能差别就在这
3.  下面是一个无状态组件

import 'antd/dist/antd.css';
    import { Input, Button, List } from 'antd';
    import React from 'react';
    
    const TodoListUI = (props) => {
        return (
            <div style={
       { margin: '10px' }}>
                <div>
                    <Input value={props.inputValue}
                        style={
       { width: '300px', marginRight: '10px' }}
                        onChange={props.handleInputChange}
                    />
                    <Button type="primary"
                        onClick={props.btnClick}
                    >提交</Button>
                </div>
                <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item, index) => (<List.Item onClick={(index) => { props.handledelete(index) }}>{item}</List.Item>)}
                    style={
       { marginTop: '10px', width: '300px' }}
                />
            </div>
        )
    }
    
    export default TodoListUI

# #

## 3.  Redux 发送异步请求 (使用redux-thunk) ##

1.  使用 axios
2.  使用 redux-thunk 将异步函数写在redux/动作文件里面, 不用redux-thunk的话可以将ajax 回调放在组件的生命周期函数里面  
      
    但是,随着组件的内容增多, 组件可能相对的比较复杂, 所以建议还是使用中间件

生命周期函数直接提交函数

componentDidMount(){
           const action = getTodoList();
           store.dispatch(action); // 当调用这个函数时, 异步函数会自动执行
        }

redux/action文件函数

export const getTodoList = () => {
       return (dispatch) => {
        axios.get('/list.json').then((res)=>{
            const data = res.data;
            const action = initListAction(data);
            dispatch(action);
        })
       }
    };

store文件

import {
        createStore,
        applyMiddleware,
        compose
    } from 'redux';
    import thunk from 'redux-thunk';
    import reducer from './reducer';
    
    const composeEnhancers =
      typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
          // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
        }) : compose;
    
    const enhancer = composeEnhancers(
        applyMiddleware(thunk),
        // other store enhancers if any
    );
    
    const store = createStore(reducer,enhancer); 
    
    export default store;

> ps : 如果不适用 redux-thunk, 直接在生命周期函数中使用(但是不建议)

componentDidMount(){
            axios.get('/list.json').then((res)=>{
            const data = res.data;
            const action = initListAction(data);
            dispatch(action);
        })
        }

## 4.  Redux 中间件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70][]

**一般情况 :** 在action通过 dispatch这个方法, 把对象发送给store

**使用中间件:** 中间件简单来说就是, 对store的dispatch方法进行升级, 允许传过来一个函数,而不是只能是对象. 在传过来的时候, 对传过来的action进行判断, 如果是函数,则先执行函数,再进行下一步的操作, 就好像这样,传递过来的函数立即执行, 这个函数默认参数是dispatch , 然后通过 dispatch 提交下一个action动作

**使用的是redux-thunk中间件**

> **ps : 只有redux才有中间件, 而不是react**

## 5.  Redux-saga 的基本使用 ##

1.  store/ index 下配置 (github上面有详细的配置)

import {
        createStore,
        applyMiddleware,
        compose
    } from 'redux';
    import createSagaMiddleware from 'redux-saga'
    import reducer from './reducer';
    import mySaga from './sagas'
    
    const sagaMiddleware = createSagaMiddleware();
    const composeEnhancers =
      typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
    
    const enhancer = composeEnhancers(
        applyMiddleware(sagaMiddleware)
    );
    
    const store = createStore(reducer,enhancer); 
    sagaMiddleware.run(mySaga);
    export default store;

2.actionCreators.js 创建行为类型

export const getInitList = () => ({
        type: GET_INIT_LIST,
    });

3.  执行步骤, 组件周期函数派发action

componentDidMount(){
            const action = getInitList();
            store.dispatch(action)
    }

4.sagas.js 接收action判断行为类型 (使用方法详见github)

saga就是组件派发action后, 拦截下来, 优先处理,该类型的函数,

** 但是与thunk不同的是, saga内置了一些方法可以处理异步函数**

import {takeEvery, put} from 'redux-saga/effects';
    import {GET_INIT_LIST} from './actionTypes';
    import {initListAction} from './actionCreators';
    import axios from 'axios';
    
    function* getInitList() {
        try{ // 成功的时候
            const res = yield axios.get('/list.json');
            const action = initListAction(res.data);
            yield put(action)
        }catch(e){
            console.log('list.json 网络请求失败')
        }  
    }
    
    
    // generator 函数
    function* mySaga() {
        yield takeEvery(GET_INIT_LIST, getInitList); // 判断action类型,处理
    }
    
    export default mySaga;

5.saga 内置 put 方法继续提交action给reducer执行后面的步骤, 后面的就是redux常规的步骤

# #

## 6.  React-Redux ##

1.  文件格式

![20181213161822453.png][]

2. index.js 入口文件

import React from 'react';
    import ReactDOM from 'react-dom';
    import TodoList from './TodoList';
    import {Provider} from 'react-redux';
    import store from './store';
    
    // 这个标签里面的所有组件都可以使用store里面的数据
    // Provider 这组件可以把store提供给它含的所有组件
    const App=(
        <Provider store={store}> 
            <TodoList/>
        </Provider>
    )
    
    // JSX 语法
    ReactDOM.render(App, document.getElementById('root'));

3.  组件

import React from 'react';
    // import store from './store';
    import { connect } from 'react-redux';
    
    const TodoList =(props) => { // 无状态组件, 性能更佳
        
            const {inputValue,list,changeInputValue,putChange,delClick} = props
            return (                                                                                               
                
                <div>
                    <div>
                        <input value={inputValue} onChange={changeInputValue} />
                        <button onClick={putChange}>提交</button>
                    </div>
                    <ul>
                        {list.map((item, index) => {
                           return <li key={index} onClick={delClick.bind(this, index)}>{item}</li>
                        })}
                        
                    </ul>
                </div>
            )
        
    }
    
    // mapStateToProps 箭头函数里面的state是和store里面的state对应的
    const mapStateToProps = (state) => {
        return {
            inputValue: state.inputValue,
            list:state.list
        }
    }
    
    // mapDispatchToProps 箭头函数里面的state是和store里面的state对应的
    // store.dispatch, props
    const mapDispatchToProps = (dispatch) => {
        return {
            changeInputValue(e) {
                const action = {
                    type: 'change_input_value',
                    value: e.target.value
                }
                dispatch(action);
            },
            putChange() {
                const action = {
                    type: 'put_change'
                }
                dispatch(action)
            },
            delClick(index){
                const action = {
                    type: 'del_click',
                    index: index
                }
                dispatch(action)
            }
        }
    }
    
    
    // connect(null, null) (TodoList)
    // 这个语法的意思是, 和store链接
    // 第一个参数是state映射
    // 第二个参数是action映射
    export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

4. store/index.js

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

5.  store/reducer.js

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70]: /images/20210726/d14bdfde2b6a4dfda6b4a60d1a4044c2.png
[20181213161822453.png]: /images/20210726/9889a0664601418897fbbdb9b75e0a15.png