在react中使用redux，react-redux

关于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的数据，

                     //这是我自己写的路由，通过provider，把仓库数据传给了路由里的组件

  

)

因为在上面我已经把值传给了子组件，所有我在子组件中使用父组件的数据用this.props

在渲染页面中使用的话，可以在render（）{ let  {userNameChanger} = this.props

return(

                                placeholder={"请输入用户名"}

                                style={{ width: '250px' }}

                                onChange={userNameChange}

                                defaultValue={this.state.userCode}

                            />

）

}

//将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'