关于redux是什么，可以看看官方的解释，下面是使用步骤
首先是安装 redux，react-redux
npm install redux react-redux
在项目中使用：
1.创建store文件夹，在store文件夹下创建index.js文件，即redux仓库（完整代码）
import {createStore} from 'redux'
import reducer from './reducer' //仓库管理员
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
export default store
2.再在store文件夹下面创建仓库管理员reducer.js
const defaultState = {
//仓库里的数据
refreshToken:null,
token:'',
inputValue: '改变的输入内容',
user:{userName:'root',password:'root',location:'西安'}
}
export default (state = defaultState,action)=>{
//reducer里只能接受state,不能改变state
//type是事件action的类型，意思是，当类型等于‘此值时’，把仓库的值转换成json类型赋值给新的对象，改变新的对象里需要改变的值，再赋值给仓库，其中action.value是页面传到仓库的值，下文会提到
if(action.type === 'getUserName'){
let newState = JSON.parse(JSON.stringify(state))
newState.user.userName = action.value
return newState
}
if(action.type === 'getPassword'){
let newState = JSON.parse(JSON.stringify(state))
newState.user.password = action.value
return newState
}
if(action.type === 'tokenChage'){
let newState = JSON.parse(JSON.stringify(state))
newState.token = action.value
console.log("token="+newState.token)
return newState
}
return state
}
3.在页面中的使用
首先在全局的index.js引入 import {Provider} from 'react-redux'
const App = (
<Provider store={store}> // Provider ---在这里，相当于提供器，提供仓库的 store的数据，
<AppRouter /> //这是我自己写的路由，通过provider，把仓库数据传给了路由里的组件
</Provider>
)
因为在上面我已经把值传给了子组件，所有我在子组件中使用父组件的数据用this.props
在渲染页面中使用的话，可以在render（）{ let {userNameChanger} = this.props
return(
<div>
<Input
placeholder={"请输入用户名"}
style={{ width: '250px' }}
onChange={userNameChange}
defaultValue={this.state.userCode}
/>
</div>
）
}
//将state转换成props
const stateToProps = (state) => {
return {
user: state.user
}
}
//连接redux数据库，通过type值改变数据库数据
const dispatchToProps = (dispatch) => {
return {
userNameChange(e) {
let action = {
type: 'getUserName',
value: e.target.value
}
dispatch(action)
},
passwordChange(e) {
let action = {
type: 'getPassword',
value: e.target.value
}
dispatch(action)
},
tokenChage(){
let action = {
type: 'tokenChage',
value: token
}
dispatch(action)
}
}
}
export default connect(stateToProps, dispatchToProps)(Login)
最后到处组件的时候需要用连接器 connect 连接页面和仓库
import { connect } from 'react-redux'
