xudux
v1.0.3
Published
实现react状态管理工具
Readme
xudux
react的状态管理工具，运用灵活
安装
npm install xudux用法
index.js配置state初始值
import React from 'react';
import ReactDOM from 'react-dom';
import configure from 'xudux';
import App from './app.js';
const initState = {
name: '张三',
};
configure(initState);
ReactDOM.render(
<App />
, document.getElementById('root'));
app.js中使用xudux做状态管理
import React, {Component} from 'react';
import {connect} from 'xudux';
class App extends Component {
constructor(props) {
super(props);
}
handleClick() {
this.props.setState$({
name: '李四王五',
});
}
render() {
return (
<>
<button onClick={this.handleClick.bind(this)}>列表</button>
<div>{this.props.name}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return {
name: state.name,
};
};
export default connect(mapStateToProps)(App);
文档
configure
Function：配置state
参数：
- state：
Object全局state对象。
import configure from 'xudux';
const state = {
name: '张三',
};
configure(state);connect
Function：连接react组件与xudux store，与react-redux的connect类似
参数：
- mapStateToProps：
Function非必填， 此函数接收一个参数state，返回一个当前组件需要的state对象
返回：
一个可以链接react组件的函数
import {connect} from 'xudux';
const mapStateToProps = (state) => {
return {
name: state.name,
};
};
export default connect(mapStateToProps)(App);