标签:流程 creates com 中间 router message 场景 物联网 onchange
Redux的主要功能就是管理复杂交错的State,比如需要讲state提升到顶层组件的场景中,使用Redux就很合适
Redux主要提供三个东西来进行状态管理
表达要进行的动作,也就是通过view层触发,来进行派发来改变全局state
也就是只返回一个action的函数
export const SignUpEmailChange = (value) => ({
type: 'SIGNUP_EMAIL_CHANGE',
value: value,
})
action通常有一个type来进行判断要进行的动作,和任意其它的字段
主要进行接收action根据其中的type来进行更改state
const registerChange = (state, action) => {
if (typeof state === 'undefined') {
return initialState
} else if(action.type === 'SIGNUP_NAME_CHANGE') {
return Object.assign({}, state, {
signUpForm: {
signup: true,
signupUsername: action.value,
signupEmail: state.signUpForm.signupEmail,
signupPwd: state.signUpForm.signupPwd,
},
})
}
...
}
当reducer膨胀时还可以进行拆分再用Redux提供的combineReducers进行组合
const Reducer = combineReducers({
ChatBar,
Message,
})
Store作为全局的state
const store = createStore(
Reducer,
Initialize,
applyMiddleware(thunk)
);
第二个第三个参数都是可选的,第一个参数就是进行执行动作的Reducer,第二个是初始化state,第三个为中间件
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Login} />
<Route path="/home" component={MainPanel} />
</Route>
</Router>
</Provider>
store通过提供dispatch函数来对action的派发,流程也就是
view -> action -> reducer -> store -> view
dispatch接收一个action创建函数
dispatch(onSignup())
Redux的一个React绑定库
主要提供的是connect把组件包装成容器
const Login = connect(
mapStateToProps,
mapDispatchToProps
)(SigninCmpt);
接收两个函数参数
主要负责把store映射到组件的props上
const mapStateToProps = (state) => ({
signup: state.signup,
})
一样是负责映射,把分发函数映射到组件的props上
const mapDispatchToProps = (dispatch) => ({
onSignup: () => {
dispatch(onSignup())
},
closeSignup: () => {
dispatch(closeSignup())
}
})
一个action异步处理库,主要功能是能够接收一个返回函数的action创建函数
const fetchSignUp = (username, email, password) => {
const url = 'http://localhost:8008/api/signup';
const data = {
username: username,
email: email,
password: password,
};
console.log('fetch', data)
return fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.then(response => console.log('Success:', response));
}
export const SignUpUser = () => {
return (dispatch, getState) => {
// TODO fix parameters
fetchSignUp(getState().signUpForm.signupUsername, getState().signUpForm.signupEmail, getState().signUpForm.signupPwd)
.then(res => {
dispatch({
type: 'SIGNUP_USER',
sign: false,
})
})
}
}
thunk的在于能够将异步执行逻辑内聚在action中,其中实现利用的是Redux的中间件
作为有别于关系型数据库的文档型数据库,其中集合对应于表,行对应与文档,列对应于字段
主要应用场景
安装驱动包 && 看文档
今天主要完成的就是在注册窗口的信息录入状态更改和到后台的验证录入响应
注册输入框的状态onChange进行接收action派发更改state更新每个输入框的内容
发送注册请求,利用redux-thunk先进行服务器请求,再进行dispatch
服务器端的接收请求和数据库的添加
MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
if (err) throw err;
var dbo = db.db("stackchat");
dbo.collection("user").insertOne(user, function(err, res) {
if (err) throw err;
console.log("insert success");
});
});
}
标签:流程 creates com 中间 router message 场景 物联网 onchange
原文地址:https://www.cnblogs.com/secoding/p/11122979.html