Redux 的基本使用

1.核心概念1.什么是Redux？Redux是一个管理状态（数据）的容器，提供了可预测的状态管理2.什么是可预测的状态管理？数据在什么时候，因为什么，发生了什么改变，都是可以控制和追踪的，我们就称之为预测的状态管理3.为什么要使用Redux？React是通过数据驱动界面更新的，React负责更新界面，而我们负责管理数据默认情况下我们可以在每个组件中管理自己的状态，但是现在前端应用程序已经变得越来越

奋斗吧，青年！

6316人浏览 · 2021-11-06 11:43:44

奋斗吧，青年！ · 2021-11-06 11:43:44 发布

1.核心概念

1.什么是Redux？
- Redux是一个管理状态（数据）的容器，提供了可预测的状态管理
2.什么是可预测的状态管理？
- 数据在什么时候，因为什么，发生了什么改变，都是可以控制和追踪的，我们就称之为预测的状态管理
3.为什么要使用Redux？
- React是通过数据驱动界面更新的，React负责更新界面，而我们负责管理数据
- 默认情况下我们可以在每个组件中管理自己的状态，但是现在前端应用程序已经变得越来越复杂
- 状态之间可能存在依赖关系（父子、共享等），一个状态的变化会引起另一个状态的变化
- 所以当应用程序复杂的时候，状态在什么时候改变，因为什么改变，发生了什么改变，就会变得非常难以控制和追踪
- 所以当应用程序复杂的时候，我们想很好的管理、维护、追踪、控制状态时，我们就需要使用Redux
4.Redux核心理念
- 通过 store 来保存数据
- 通过 action 来修改数据
- 通过 reducer 来关联 store 和 action

2.三大原则

1.Redux三大原则
- 单一数据源
  - 整个应用程序的state只存储在一个 store 中
  - Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护
  - 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改
- State是只读的
  - 唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State
  - 这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改stat；
  - 这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题；
- 使用纯函数来执行修改
  - 通过reducer将旧state和 action联系在一起，并且返回一个新的State：
  - 随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分
  - 但是所有的reducer都应该是纯函数，不能产生任何的副作用
2.什么是纯函数
- 返回结果只依赖于它的参数，并且在执行过程里面没有副作用

// 纯函数
function sum(num1, num2){
    return num1 + num2;
}

// 非纯函数
let num1 = 10;
function sum(num2){
    return num1 + num2;
}

// 纯函数
const num1 = 10;
function sum(num2){
    return num1 + num2;
}

3.基本使用

准备工作
- 创建 demo 目录
- cd demo
- npm init -y #初始化一个node项目
- npm install --save redux #安装redux
redux的使用
- store.subscribe() #监听函数（一旦 state 发生变化，就自动执行这个函数）
- store.getState() #获取当前的 state
- store.dispatch() #派发 action（用于修改state）

// 导入redux
const redux = require('redux');

// 1.定义一个状态（数据）
let initialState = {
    count: 0
}

// 2.利用store保存状态
const store = redux.createStore(reducer);

// 3.利用action修改状态
const addAction = {type:'ADD_COUNT', num: 1};
const subAction = { type: 'SUB_COUNT', num: -1};

// 4.利用reduce关联store与action
function reducer(state = initialState, action){
    switch(action.type){
        case 'ADD_COUNT':
            return { count: state.count + action.num};
        case 'SUB_COUNT':
            return { count: state.count + action.num };
        default:
            return state;
    }
}

// 在组件中如何使用？

// 1.监听状态的改变
store.subscribe(()=>{
    console.log(store.getState());
}
)

// 2.获取Store中存储的状态
console.log(store.getState());

// 3.修改Store中存储的状态
store.dispatch(subAction);
// console.log(store.getState());

当前代码存在的问题
- 1.store、action、reducer代码都写在一个文件中，不利于维护
- 2.action和reducer中都是使用字符串，来指定和判断操作类型，写错不报错
- 3.action中的操作写死了，不够灵活
优化

const redux = require('redux');

// 定义常量
const ADD_COUNT = 'ADD_COUNT';
const SUB_COUNT = 'SUB_COUNT';
// 定义一个状态
let initialState = {
    count: 0
};

// 利用store来保存状态（state）
const store = redux.createStore(reducer);

// 利用action来修改状态
// const addAction = {type:ADD_COUNT, num: 1};
// const subAction = {type:SUB_COUNT, num: -1};
const addAction = (num)=>{
    return {type:ADD_COUNT, num: num};
};
const subAction = (num)=>{
    return {type:SUB_COUNT, num: num};
};

// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_COUNT:
            return {count: state.count + action.num};
        case SUB_COUNT:
            return {count: state.count - action.num};
        default:
            return state;
    }
}

// 在组件中如何监听状态的改变？
store.subscribe((a)=>{
    console.log(store.getState());
});

// 在组件中如何从Store中获取存储的状态？
console.log(store.getState());

// 在组件中如何修改Store中存储的状态？
// store.dispatch(addAction(5));
store.dispatch(subAction(5));

// console.log(store.getState());

4.结合 React

npm install --save redux
在src目录下，新建store目录

store/constants.js

// 定义常量
export const ADD_COUNT = 'ADD_COUNT';
export const SUB_COUNT = 'SUB_COUNT';

store/store.js

import {createStore} from 'redux';
import reducer from './reducer';

// 利用store来保存状态（state）
const store = createStore(reducer);

export default store;

store/action.js

import {
    ADD_COUNT,
    SUB_COUNT
} from './constants';

// 利用action来修改状态
// const addAction = {type:ADD_COUNT, num: 1};
// const subAction = {type:SUB_COUNT, num: -1};
export const addAction = (num)=>{
    return {type:ADD_COUNT, num: num};
};
export const subAction = (num)=>{
    return {type:SUB_COUNT, num: num};
};

store/reducer.js

import {
    ADD_COUNT,
    SUB_COUNT
} from './constants';

// 定义一个状态
let initialState = {
    count: 666
};

// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_COUNT:
            return {count: state.count + action.num};
        case SUB_COUNT:
            return {count: state.count - action.num};
        default:
            return state;
    }
}

export default reducer;

App.js

import React from 'react';
import store from './store/store';
import {addAction, subAction} from './store/action';

class App extends React.PureComponent{
    constructor(props){
        super(props);
        this.state = {
            // 1.getState()：获取存储的状态（数据）
            count: store.getState().count
        }
    }
    // componentDidMount：当组件被挂载时(已经完成渲染)，react会自动调用该方法
    componentDidMount() {
        // 3.subscribe()：监听状态的改变
        store.subscribe(()=>{
            // 将修改后的数据重新存储到state中
            this.setState({
                count: store.getState().count
            })
        })
    }
    // componentWillUnmount：当组件被卸载时，react会自动调用该方法
    componentWillUnmount() {
        // 4.unsubscribe()：移除监听状态的改变事件
        store.unsubscribe();
    }

    render(){
        return(
            <div>
                <p>{this.state.count}</p>
                <button onClick={()=>{this.btnClick()}}>增加</button>
            </div>
        )
    }
    btnClick(){
        // 2.dispatch()：修改Store中存储的状态
        store.dispatch(addAction(5));
    }
}

export default App;

存在问题：
- 1.冗余代码太多, 每次使用都需要在构造函数中获取
- 2.每次使用都需要监听和取消监听
- 3.操作store的代码过于分散
如何优化：
- 如何解决冗余代码太多问题
  - 使用 React-Redux
- 什么是 React-Redux
  - React-Redux是Redux官方的绑定库,能够让我们在组件中更好的读取和操作Redux 保存的状态
  - 安装react-reduct： npm install react-reduct

index.js

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

ReactDOM.render(
    // 只要利用Provider将祖先组件包裹起来
    // 并且通过Provider的store属性将Redux的store传递给Provider
    // 那么就可以在所有后代中直接使用Redux了
    <Provider store={store}>
        <React.StrictMode>
            <App/>
        </React.StrictMode>
    </Provider>
    , document.getElementById('root'));

components/Home.js

import React from 'react';
import { connect } from 'react-redux';
import {addAction, subAction} from '../store/action';

class Home extends React.PureComponent{
    render(){
        return (
            <div>
                 {/* 3.通过props来使用redux中保存的数据 */}
                <p>{this.props.count}</p>
                <button onClick={()=>{this.props.increment()}}>递增</button>
            </div>
        )
    }
}
// 1.mapStateToProps方法：告诉React-Redux, 需要将store中保存的哪些数据映射到当前组件的props上
const mapStateToProps = (state)=>{
    return{
        count: state.count
    }
}
// 2.mapDispatchToProps方法：告诉React-Redux, 需要将哪些派发的任务映射到当前组件的props上
const mapDispatchToProps = (dispatch)=>{
    return{
        increment(){
            dispatch(addAction(1));
        }
    }
}
// 4.connect：关联Home组件与mapStateToProps和mapDispatchToProps方法
export default connect(mapStateToProps, mapDispatchToProps)(Home);

5.Redux 处理网络请求

前提
- 1.搭建一个Egg项目
- 2.快速启动Egg项目（ npm run dev ）
- 3.输入：localhost:7001/info 即可访问页面

store/constants.js

// 定义常量
export const ADD_COUNT = 'ADD_COUNT';
export const SUB_COUNT = 'SUB_COUNT';
export const CHANGE_INFO = 'CHANGE_INFO';

store/store.js

import {createStore} from 'redux';
import reducer from './reducer';

// 利用store来保存状态（state）
const store = createStore(reducer);

export default store;

store/action.js

import {
    ADD_COUNT,
    SUB_COUNT,
    CHANGE_INFO
} from './constants';

// 利用action来修改状态
// const addAction = {type:ADD_COUNT, num: 1};
// const subAction = {type:SUB_COUNT, num: -1};
export const addAction = (num)=>{
    return {type:ADD_COUNT, num: num};
};
export const subAction = (num)=>{
    return {type:SUB_COUNT, num: num};
};
export const changeAction = (info)=>{
    return {type:CHANGE_INFO, info: info};
};

store/reducer.js

import {
    ADD_COUNT,
    SUB_COUNT,
    CHANGE_INFO
} from './constants';

// 定义一个状态
let initialState = {
    count: 666,
    info: {}
};

// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_COUNT:
            return {...state, count: state.count + action.num};
        case SUB_COUNT:
            return {...state, count: state.count - action.num};
        case CHANGE_INFO:
        return {...state, info: action.info};
        default:
            return state;
    }
}

export default reducer;

components/About.js

import React from 'react';
import { connect } from 'react-redux';
import { addAction, changeAction } from '../store/action';

class About extends React.PureComponent {
    // componentDidMount：已经挂载（渲染完成）时，react会自动调用该方法
    componentDidMount() {
        // 发送GET请求
        fetch('http://localhost:7001/info')
            .then((response) => {
                // 转换为json格式
                return response.json();
            })
            .then((data) => {
                // console.log(data);
                this.props.changeInfo(data);
            })
            .catch((error) => {
                console.log(error);
            })
    }
    render() {
        return (
            <div>
                {/* 3.通过props来使用redux中保存的数据 */}
                <p>{this.props.count}</p>
                <button onClick={() => { this.props.increment() }}>递增</button>
                <p>{this.props.info.name}</p>
                <p>{this.props.info.age}</p>
            </div>
        )
    }
}
// 1.mapStateToProps方法：告诉React-Redux, 需要将store中保存的哪些数据映射到当前组件的props上
const mapStateToProps = (state) => {
    return {
        count: state.count,
        info: state.info
    }
}
// 2.mapDispatchToProps方法：告诉React-Redux, 需要将哪些派发的任务映射到当前组件的props上
const mapDispatchToProps = (dispatch) => {
    return {
        increment() {
            dispatch(addAction(1));
        },
        changeInfo(info) {
            dispatch(changeAction(info));
        }
    }
}
// 4.connect：关联Home组件与mapStateToProps和mapDispatchToProps方法
export default connect(mapStateToProps, mapDispatchToProps)(About);

6.Redux-thunk 中间件

优化：将异步请求封装到 Redux 中
1.当前保存异步数据存在的问题
- 异步数据既然要保存到Redux中, 所以获取异步数据也应该是Redux的一部分
- 所以获取异步数据的代码应该放到Redux中, 而不是放到组件生命周期方法中
2.如何在Redux中获取网络数据
- 使用 redux-thunk 中间件
3.redux-thunk 作用
- 默认情况下 dispatch 只能接收一个对象
- 使用 redux-thunk 可以让 dispatch 除了可以接收一个对象以外, 还可以接收一个函数
- 通过 dispatch 派发一个函数的时候能够去执行这个函数, 而不是执行 reducer 函数
4.redux-thunk 如何使用
- 安装 redux-thunk
  - npm install redux-thunk
- 在创建 store 时应用 redux-thunk 中间件
- 在 action 中获取网络数据
- 在组件中派发 action

store/store.js

import { createStore, applyMiddleware } from 'redux';
import reducer from './reducer';
// 1.导入thunkMiddleware中间件
import thunkMiddleware from 'redux-thunk';

// 2.应用thunkMiddleware中间件
// 在创建store之前, 通过applyMiddleware方法, 告诉Redux需要应用哪些中间件
const storeEnhancer = applyMiddleware(thunkMiddleware);
// 利用store来保存状态（state）
const store = createStore(reducer, storeEnhancer);

export default store;

store/action.js

import {
    ADD_COUNT,
    SUB_COUNT,
    CHANGE_INFO
} from './constants';

// 利用action来修改状态
// const addAction = {type:ADD_COUNT, num: 1};
// const subAction = {type:SUB_COUNT, num: -1};
export const addAction = (num) => {
    return { type: ADD_COUNT, num: num };
};
export const subAction = (num) => {
    return { type: SUB_COUNT, num: num };
};
export const changeAction = (info) => {
    return { type: CHANGE_INFO, info: info };
};

// 定义getUserInfo方法，在这个方法中发送网络请求并派发任务
export const getUserInfo = (dispatch, getState)=>{
    // 发送GET请求
    fetch('http://localhost:7001/info')
        .then((response) => {
            // 转换为json格式
            return response.json();
        })
        .then((data) => {
            // console.log(data);
            // dispatch：派发任务
            dispatch(changeAction(data));
        })
        .catch((error) => {
            console.log(error);
        })
}

components/About.js

import React from 'react';
import { connect } from 'react-redux';
import { addAction, getUserInfo } from '../store/action';

class About extends React.PureComponent {
    // componentDidMount：已经挂载（渲染完成）时，react会自动调用该方法
    componentDidMount() {
       // 调用changeInfo方法
       this.props.changeInfo();
    }
    render() {
        return (
            <div>
                {/* 3.通过props来使用redux中保存的数据 */}
                <p>{this.props.count}</p>
                <button onClick={() => { this.props.increment() }}>递增</button>
                <p>{this.props.info.name}</p>
                <p>{this.props.info.age}</p>
            </div>
        )
    }
}
// 1.mapStateToProps方法：告诉React-Redux, 需要将store中保存的哪些数据映射到当前组件的props上
const mapStateToProps = (state) => {
    return {
        count: state.count,
        info: state.info
    }
}
// 2.mapDispatchToProps方法：告诉React-Redux, 需要将哪些派发的任务映射到当前组件的props上
const mapDispatchToProps = (dispatch) => {
    return {
        increment() {
            dispatch(addAction(1));
        },
        changeInfo() {
            // dispatch(changeAction(info));
            // 注意点: 默认情况下dispatch方法只能接收一个对象
            //        如果想让dispatch方法除了可以接收一个对象以外, 还可以接收一个方法
            //        那么我们可以使用 redux-thunk 中间件
            // redux-thunk中间件作用:
            // 让dispatch方法可以接收一个函数, 让我们在通过dispatch派发任务的时候去执行我们传入的方法

            // 在dispatch派发任务时，直接执行getUserInfo方法
            dispatch(getUserInfo);
        }
    }
}
// 4.connect：关联Home组件与mapStateToProps和mapDispatchToProps方法
export default connect(mapStateToProps, mapDispatchToProps)(About);

7.Redux-saga 中间件

1.什么是 Redux-saga
- redux-saga 和 redux-thunk 一样，是一个 Redux 中获取存储异步数据的中间件
- redux-saga 可以直接拦截 dispatch 派发的 action, 从而实现在执行 reducer 之前执行一些其它操作
2.如何使用 Redux-saga
- 1.安装 Redux-saga
  - npm install redux-saga
- 2.在创建 store 时,应用 redux-thunk 中间件
- 3.在生成器函数中获取网络数据
- 4.在组件中派发 action

store/store.js

import { createStore, applyMiddleware } from 'redux';
import reducer from './reducer';
import mySaga from './saga';
/*
注意点: 如果导入的是redux-thunk, 那么返回给我们的是一个中间件对象
       如果导入的是redux-saga, 那么返回给我们的是一个用于创建中间件对象的方法
* */
// import thunkMiddleware from 'redux-thunk';

// 1.导入中间件方法
import createSagaMiddleware from 'redux-saga';


// 2.通过createSagaMiddleware方法，创建saga中间件对象
const sagaMiddleware = createSagaMiddleware();

// 3.应用sagaMiddleware中间件
// 在创建store之前, 通过applyMiddleware方法, 告诉Redux需要应用哪些中间件
const storeEnhancer = applyMiddleware(sagaMiddleware);

// 利用store来保存状态（state）
const store = createStore(reducer, storeEnhancer);

/*
注意点: 如果是redux-thunk, 那么在创建store的时候指定完中间件即可
       如果是redux-saga, 那么除了需要在创建store的时候指定中间件以外, 还需要手动的调用中间件的run方法才行
* */
// 4.拦截 action
// 利用传入的生成器告诉redux-saga, 需要拦截哪些dispatch派发的action
sagaMiddleware.run(mySaga);

export default store;

store/constants.js

// 定义常量
export const ADD_COUNT = 'ADD_COUNT';
export const SUB_COUNT = 'SUB_COUNT';
export const CHANGE_INFO = 'CHANGE_INFO';
export const GET_USER_INFO = 'GET_USER_INFO';

store/soga.js

import { takeEvery, put } from 'redux-saga/effects'
import { GET_USER_INFO } from './constants';
import { changeAction } from './action';

function *myHandler() {
    // 获取网络数据
    const data = yield fetch('http://127.0.0.1:7001/info')
        .then((response) => {
            return response.json();
        })
        .catch((error) => {
            console.log(error);
        });
    // console.log(data);
    // 保存获取到的数据，相当于 store.dispatch(changeAction());
    yield put(changeAction(data));
}
function *mySaga() {
    // 第一个参数：指定需要拦截的action类型
    // 第二个参数：指定拦截到这个类型的action之后交给谁来处理
    yield takeEvery(GET_USER_INFO, myHandler)
}

export default mySaga;

store/action.js

import {
    ADD_COUNT,
    SUB_COUNT,
    CHANGE_INFO,
    GET_USER_INFO
} from './constants';

// 利用action来修改状态
export const addAction = (num) => {
    return { type: ADD_COUNT, num: num };
};
export const subAction = (num) => {
    return { type: SUB_COUNT, num: num };
};
export const changeAction = (info) => {
    return { type: CHANGE_INFO, info: info };
};

export const getUserInfo = () => {
    return { type: GET_USER_INFO }
}

store/reducer.js

import {
    ADD_COUNT,
    SUB_COUNT,
    CHANGE_INFO
} from './constants';

// 定义一个状态
let initialState = {
    count: 666,
    info: {}
};

// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_COUNT:
            return { ...state, count: state.count + action.num };
        case SUB_COUNT:
            return { ...state, count: state.count - action.num };
        case CHANGE_INFO:
            return { ...state, info: action.info };
        default:
            return state;
    }
}

export default reducer;

components/About.js

import React from 'react';
import { connect } from 'react-redux';
import { addAction, getUserInfo } from '../store/action';

class About extends React.PureComponent {
    // componentDidMount：已经挂载（渲染完成）时，react会自动调用该方法
    componentDidMount() {
        // 调用changeInfo方法
       this.props.changeInfo();
    }
    render() {
        return (
            <div>
                {/* 3.通过props来使用redux中保存的数据 */}
                <p>{this.props.count}</p>
                <button onClick={() => { this.props.increment() }}>递增</button>
                <p>{this.props.info.name}</p>
                <p>{this.props.info.age}</p>
            </div>
        )
    }
}
// 1.mapStateToProps方法：告诉React-Redux, 需要将store中保存的哪些数据映射到当前组件的props上
const mapStateToProps = (state) => {
    return {
        count: state.count,
        info: state.info
    }
}
// 2.mapDispatchToProps方法：告诉React-Redux, 需要将哪些派发的任务映射到当前组件的props上
const mapDispatchToProps = (dispatch) => {
    return {
        increment() {
            dispatch(addAction(1));
        },
        changeInfo() {
            // 在dispatch派发任务时，直接执行getUserInfo方法
            // dispatch(getUserInfo);

            // dispatch 接收一个对象
            dispatch(getUserInfo());
        }
    }
}
// 4.connect：关联Home组件与mapStateToProps和mapDispatchToProps方法
export default connect(mapStateToProps, mapDispatchToProps)(About);

Redux-saga 补充：

takeEvery和takeLatest区别在于：是否能够完整的执行监听方法
- 对于takeEvery而言, 每次拦截到对应类型的action, 都会完整的执行监听方法
- 对于takeLatest而言, 每次拦截到对应类型的action, 都不能保证一定能够完整的执行监听方法

store/saga.js

import {takeEvery, takeLatest, put, all} from 'redux-saga/effects'
import {GET_USER_INFO, ADD_COUNT, SUB_COUNT} from './constants';
import {changeAction} from './action';

function *myHandler() {
    // 获取网络数据
    const data1 = yield fetch('http://127.0.0.1:7001/info')
        .then((response)=>{
            return response.json();
        })
        .catch((error)=>{
            console.log(error);
        });
    const data2 = yield fetch('http://127.0.0.1:7001/info')
        .then((response)=>{
            return response.json();
        })
        .catch((error)=>{
            console.log(error);
        });
    /*
    如果我们只需要保存一个数据, 那么直接通过 yield put 即可
    但是如果我们想同时保存多个数据, 那么我们就必须借助另外一个函数：all()
    * */
    // yield put(changeAction(data));
    yield all([
        yield put(changeUserAction(data1)),
        yield put(changeInfoAction(data2)),
        yield put({type:'CHANGE_USER_NAME', name: data1.name}),
        yield put({type:'CHANGE_USER_Age', name: data1.age}),
    ])
    console.log('执行到了监听方法的最后', data);
}
function *mySaga() {
    /*
    takeEvery和takeLatest区别: 是否能够完整的执行监听方法
    对于takeEvery而言, 每次拦截到对应类型的action, 都会完整的执行监听方法
    对于takeLatest而言, 每次拦截到对应类型的action, 都不能保证一定能够完整的执行监听方法

    例如: 连续派发了3次GET_USER_INFO的action
         那么对于takeEvery而言, myHandler就会被完整的执行3次
         那么对于takeLatest而言, 如果派发下一次同类型action的时候
         上一次派发的action还没有处理完, 也就是上一次的监听方法还没有处理完
         那么takeLatest会放弃还没有处理完的代码, 直接开始处理下一次的action
    * */
    // yield takeEvery(GET_USER_INFO, myHandler)
    // yield takeLatest(GET_USER_INFO, myHandler)
    /*
    如果我们只需要拦截一个类型的action, 那么直接通过 yield takeEvery / yield takeLatest即可
    但是如果我们想同时拦截多个类型的action, 那么我们就必须借助另外一个函数: all()
    * */
    yield all([
        yield takeEvery(GET_USER_INFO, myHandler),
        yield takeEvery(ADD_COUNT, myHandler),
        yield takeEvery(SUB_COUNT, myHandler),
    ]);
}
export default mySaga;

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...