React-redux入门

react-redux

以一个输入框为例，读取store中的值并修改。前提是有redux的基础（我之前写过），所以有些地方不复述了。

安装

npm install react-redux -S

入口index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import Text from './Text';
import * as serviceWorker from './serviceWorker';
import { Provider} from 'react-redux'
import store from './reactRedux/index'
const App = (
// Provider组件，与stores数据关联，让Provider的内部组件都可以获取store里面的数据
<Provider store={store}>
<Text />
</Provider>
)
ReactDOM.render(App, document.getElementById('root'));
serviceWorker.unregister();

Text.js

import React, { Component } from 'react'
import {connect} from 'react-redux'
class Text extends Component {
render() {
return (
<div>
<div>
<input type="text" value={this.props.inputValue} onChange={this.props.inputChangeValue}/>
<button>提交</button>
</div>
</div>

)
}
}
// 赋值 state形参 取store
// state.inputValue映射到组件中props中，取值 this.props.inputValue
const mapStateToProps = (state)=>{
return{
inputValue:state.inputValue
}
}
// store.dispatch   方法挂在到props上 this.props.inputChangeValue
const mapDispatchToProps=(dispatch)=>{
return{
inputChangeValue(e){
const action ={
type:"change_inputValue",
value:e.target.value
}
console.log(e.target.value);
dispatch(action)
}
}
}
// connect 让组件和store连接 两个规则 1.数据的读取 2.数据改变 action
// 无需订阅
export default connect(mapStateToProps,mapDispatchToProps)(Text)

store设置文件

index.js

import { createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)

export default store

reducer.js

const defaultState = {
inputValue:"hello world",
list:[]
};
export default (state = defaultState,action)=>{
if(action.type==='change_inputValue'){
const newState=JSON.parse(JSON.stringify(state))
newState.inputValue= action.value;
return newState
}

return state
}

如有问题，欢迎留言