借鑑redux，實現一個react狀態管理方案

時間 2019-12-09

標籤借鑑 redux 實現一個 react 狀態管理方案欄目 React 简体版

原文原文鏈接

react狀態管理方案有不少，其中最簡單的最經常使用的是redux。react

redux實現

redux作狀態管理，是利用reducer和action實現的state的更新。若是想要用redux，須要幾個步驟git

actions

建立actions.jsgithub

// actions.js
export const SET_NAME = 'SET_NAME';
export const setName = (name) => {
    return {
        type: SET_NAME,
        name,
    }
}

reducer

建立reducers.jsredux

// reducers.js
import {SET_NAME} from './actions';
const nameState = (state = '', action) => {
    switch(action.type) {
        case SET_NAME: {
            return action.name;
        }
        default: {
            return state;
        }
    }
}
export default nameState;

入口文

項目的入口文件app

// index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './App'

const store = createStore(rootReducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

App組件

業務組件代碼dom

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {setName} from './actions';

class App extends Component {
    constructor(props) {
        super(props);
    }
    handleClick() {
        this.props.setName('張三李四')
    }
    render() {
        return (
            <div>
                {this.props.name}
                <button onClick={this.handleClick.bind(this)}>修改name</button>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        name: state.name,
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        setName(name) {
            dispatch(setName(name));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

redux實現原理

redux是狀態管理工具，react-redux使得react組件能與redux結合。ide

Provider

Provider是一個高階組件，他須要在最外層，才能實現store被全部子組件共享。函數

connect

connect方法是將react組件鏈接store的方法。connect方法會將組件使用到的state和須要觸發的action映射到react組件的屬性上。工具

詳解請看react-redux文檔post

爲何不用redux

redux提供了很是系統完整的state管理方案，用文檔裏的一句話則是：

經過限制更新發生的時間和方式，Redux 試圖讓 state 的變化變得可預測.

由於他很完整，因此相對複雜，須要較多的配置。在小的項目中想要更簡便的狀態管理方案，因此拋棄redux，尋找其餘方案。

xudox實現

肯定用法
完整示例
原理簡介

肯定用法

目的就是使用起來最簡單，所以我可能會這樣用

// 組件中使用
import React, { Component } from 'react';
import {connect} from 'xubox';

class AA extends Component {
    constructor(props) {
        super(props)
    }
    handleClick() {
        // 給組件掛在setState$方法，在這裏直接改變state值
        this.props.setState$({
            name: '張三李四'
        })
    }
    render() {
        return (
            <div>
                {this.props.name}
                <button onClick={this.handleClick.bind(this)}></button>
            </div>
        )
    }
}
// 與redux同樣，函數返回組件須要的state
const mapStateToProps = (state) => {
    return {
        name: state.name,
    };
};

// 與redux同樣用法，區別是隻傳遞mapStateToProps一個參數
connect(mapStateToProps)(AA);

從代碼看上去與redux好像，只不過少了dispatch緩解，改爲了直接改變state。那其餘設置呢？除了手動設置初始state值，其餘不須要任何設置。

設置state的初始值

// 入口文件
import configureState from 'xubox';

configureState({
    name: localStorage.getItem('name') || '無名氏'
});

完整示例

入口文件

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js'
import configure from 'xudux';
// 初始state
let state =  {
    name: '無名氏',
};

configure(state);
ReactDOM.render(
    <App />
, document.getElementById('root'));

組件內

app.js

import React, { Component } from 'react';
import { connect } from 'xudux';

class App extends Component {
    constructor(props) {
        super(props);
    }
    handleClick() {
        this.props.setState$({
            name: '張三李四',
        });
    }
    render() {
        return (
            <div>
                {this.props.name}
                <button onClick={this.handleClick.bind(this)}>修改name</button>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        name: state.name,
    };
};

export default connect(mapStateToProps)(App);