Redux基础知识

Redux是什么

• Redux专注于状态管理，和react解耦 单
• 一状态，单向数据流
• 核心概念：store,state,action,reducer

import { createStore } from 'redux'

const store = createStore(counter) // 创建仓库
store.subscribe(listener) // 订阅
store.dispatch({type: 'add'}) // 派发事件
store.dispatch({type: 'del'})

function counter (state=0, action) {
	switch (action.type) {
		case 'add':
			return state+1
		case 'del':
			return state-1
		default:
			return 10
	}
}

function listener () {
	const current = store.getState()
	console.log(current)
}

Redux状态管理，使用React-redux

yarn add react-redux

React-redux提供Provide和connect两个接口接口来链接

React-redux具体使用

• Provide组件在应用最外层，传入store即可，只用一次
• Connect负责从外部获取组件需要的参数
• Connect可以用装饰器的方式来写

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import thunk from 'redux-thunk'
import {createStore, applyMiddleware, compose} from 'redux'
import App from './App.js'
import { Provider } from 'react-redux'
import { counter } from './index.redux.js'

const reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : () => {}
const store = createStore(counter, compose(
	applyMiddleware(thunk),
	reduxDevtools
))

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

App.js

import React from 'react'
import { connect } from 'react-redux'
import { addGun, delGun, addGunAsync } from './index.redux.js'

class App extends React.Component{
	render () {
		return (
			<div>
				<h1>现在有激情{this.props.num}</h1>
				<button onClick={() => this.props.addGun()}>申请武器</button>
				<button onClick={() => this.props.delGun()}>放弃武器</button>
				<button onClick={() => this.props.addGunAsync()}>拖两天再给</button>
			</div>
		)
	}
}

const mapStatetoProps = (state) => {
	return {
		num: state
	}
}

const actionCreators = { addGun, delGun, addGunAsync }

App = connect(mapStatetoProps, actionCreators)(App)

export default App

index.redux.js

const ADD = 'add'
const DEL= 'del'
// reducer
export  function counter (state=0, action) {
	switch (action.type) {
		case ADD:
			return state+1
		case DEL:
			return state-1
		default:
			return 10
	}
}

export function addGun () {
	return {
		type: ADD
	}
}

export function delGun () {
	return {
		type: DEL
	}
}

// 异步提交
export function addGunAsync () {
	return dispatch => {
		setTimeout(() => {
			dispatch(addGun())
		}, 2000)
	}
} 

使用装饰器优化connect代码

yarn eject 弹出个性化配置
yarn add @babel/plugin-proposal-decorators --dev 插件

Package.json里babel加上plugins配置
["@babel/plugin-proposal-decorators", { “legacy”: true }]

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
  }

App.js

// import React from 'react';
// import logo from './logo.svg';
// import './App.css';

// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }

// export default App;

// import React from 'react';
// import {Button} from 'antd-mobile'
// import 'antd-mobile/dist/antd-mobile.css'
// import { List } from 'antd-mobile';
// const Item = List.Item;
// class App extends React.Component{
// 	render () {
// 		let boss = '李云龙'
// 		return (
// 			<div>
// 				<Yiying big='张大喵'></Yiying>
// 				<Qibinglian big='孙德胜'></Qibinglian>
// 				<h2>独立团,团长{boss}</h2>
// 			</div>
// 		)
// 	}
// }

// function Qibinglian (props) {
// 	return <h2>骑兵连连长,{props.big}冲啊</h2>
// }

// class Yiying extends React.Component{
// 	constructor(props) {
// 	    super(props)
// 		this.state = {
// 			solders: ['虎子', '柱子', '王根生']
// 		}
// 		// this.addSolder = this.addSolder.bind(this)
// 	}
// 	componentWillMount () {
// 		console.log('组件马上就要加载了')
// 	}
// 	addSolder () {
// 		console.log('add solder')
// 		this.setState({
// 			solders: [...this.state.solders, '牛爱花' + Math.random()]
// 		})
// 	}
// 	componentDidMount () {
// 		console.log('组件加载完毕')
// 	}
// 	render () {
// 		console.log('组件正在加载了')
// 		return (
// 			<div>
// 				<h2>一营营长,{this.props.big}</h2>
// 				<Button type="primary" onClick={() => this.addSolder()}>新兵入伍</Button>
// 				<List renderHeader={() => '士兵列表'} className="my-list">
// 					{
// 						this.state.solders.map((item) => {
// 							return  <Item arrow={'horizontal'} key={item}>{item}</Item>
      
// 						})
// 					}
// 				</List>
// 			</div>
// 		)
// 	}
// }

// export default App

import React from 'react'
import { connect } from 'react-redux'
import { addGun, delGun, addGunAsync } from './index.redux.js'

const actionCreators = { addGun, delGun, addGunAsync }

// App = connect(mapStatetoProps, actionCreators)(App)

@connect(
	state => state.num, // 你要state什么属性放到props里
	{ addGun, delGun, addGunAsync } // 你要什么方法，放到propsli ,自动dispatch
)
class App extends React.Component{
	render () {
		return (
			<div>
				<h1>现在有激情{this.props.num}</h1>
				<button onClick={() => this.props.addGun()}>申请武器</button>
				<button onClick={() => this.props.delGun()}>放弃武器</button>
				<button onClick={() => this.props.addGunAsync()}>拖两天再给</button>
			</div>
		)
	}
}

export default App

后续进阶：

• 什么数据应该放在React里
• Redux管理ajax
• Redux管理聊天数据