Redux

Work flow

Redux Basis

React Redux Basis

Work flow of redux

Redux Demo

import {createStore, combineReducers, applyMiddleware} from 'redux'
import ReduxThunk from 'redux-thunk'
import { composeWithDevTools} from 'redux-devtools-extension'

const initialState = {
    count: 0
}

const userInitialState = {
    username: 'john'
}



const ADD = 'ADD'
function counterReducer(state = initialState, action) {
    console.log(state, action)
    switch (action.type) {
        case ADD:
            return {count: state.count + (action.num || 1) }
        default:
            return state
    }
}
const UPDATE_NAME = 'UPDATE_NAME'
function userReducer(state= userInitialState, action) {
    switch(action.type) {
        case UPDATE_NAME:
            return {...state, username: action.name}
        default:
            return state
    }
}

const allReducers = combineReducers({
    counter: counterReducer,
    user: userReducer
})
// createStore(reducer, [preloadedState], [enhancer])
const store = createStore(allReducers,
    {
    counter: initialState,
    user: userInitialState
    },
    composeWithDevTools(applyMiddleware(ReduxThunk)) //执行异步dispatch，异步action, 和一个有效的redux调试工具
);

// action create
function add(num) {
    return {
        type: ADD,
        num,
    }
}

//
function addAsync(num) {
    return (dispatch, getState) => setTimeout(()=>{
        dispatch(add(num))
    }, 1000)
}

console.log(store.getState())
store.dispatch({type: ADD})
console.log(store.getState())

store.subscribe(()=>{
    console.log('changed', store.getState())
})

store.dispatch(add(3))
// store.dispatch({type: ADD})
store.dispatch(addAsync(5))
store.dispatch({type: UPDATE_NAME, name: 'Yehya'})

export default store

React Redux

in _app.js

import App, {Container} from 'next/app'
import { Provider } from 'react-redux'

import 'antd/dist/antd.css'
import Layout from "../components/Layout";
import '../styles.css'
import MyContext from '../lib/my-context'
import store from '../store/store'

class  MyApp extends App {
    state = {
        context: 'value'
    }
    static async getInitialProps({Component, ctx}) {
        console.log('init app')
        let pageProps = {}
        if(Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx)

        }
        return {
            pageProps
        }

    }

    render() {
        const {Component, pageProps} = this.props//每个页面渲染的时候都会作为Component
        return (
            <Container>
                <Layout>
                    <Provider store={store}>
                        <MyContext.Provider value={this.state.context}>
                            <Component {...pageProps}/>
                            <button onClick={()=>this.setState({context:`${this.state.context}111`})}>update context</button>
                        </MyContext.Provider>
                    </Provider>
                </Layout>
            </Container>
        )
    }
}

export default MyApp

we import store.

In index.js

export default connect(function mapStateToProps(state) {
    return {
        counter: state.counter.count,//exposed by createStore
        username: state.user.username
    }
}, function mapDispatchToProps(dispatch) {
    return {
        add: (num)=> dispatch({ type: 'ADD', num}),
        rename: (name) => dispatch({type: 'UPDATE_NAME', name})
    }
})(Index)

store创建，connect 用法, redux实现flux数据流向 通过点击button 触发 action，action调用reducer，更新state,传递给provider，进入react